0
votes

Compteur de caractères montrant dans le champ d'entrée

J'ai un champ de saisie et je souhaite pouvoir montrer la longueur des caractères saisis mais je veux que ce soit dans la zone d'entrée jusqu'à la fin de la zone d'entrée. Je ne suis même pas sûr où commencer à faire cela.

Pas vraiment sûr où commencer. xxx

compteur dans le champ d'entrée tiré sur le bord droit

javascript vue.js vuejs2

3 commentaires

Vous pouvez toujours utiliser CSS: jsfiddle.net/khrismuc/1jm4yhsk

@chrisg Cela fonctionne dans le violon mais pas mon projet. Je l'ai épinglé à Bulmba étant la cause du problème. Ces classes de mon HTML sont des cours de Bulma. Voici un violon avec la bibliothèque ajoutée. Toute façon de le faire fonctionner avec cette bibliothèque sur Tehre? jsfiddle.net/hvg1e7ns/1

jsfiddle.net/khrismuc/s8cuabkx

3 Réponses :

0
votes

Essayez ceci

holder {
  position: relative;
}

.holder label {
  position: absolute;
  left: 200px;
  top: 26px;
  width: 20px;
  height: 20px;
}

.holder input {
  padding: 2px 2px 2px 25px;
}

1 commentaires

Ce que je cherche à faire, c'est avoir le compteur dans la même entrée qu'un utilisateur saisit.

2
votes

Ceci peut être manipulé dans CSS de nombreuses manières

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- App 2 -->
<div id="app1">
  <div class="field">
    <div class="control is-expanded">
      <input type="text" class="input size19" placeholder="description one" v-model="keyword" />
      <span v-if="keyword.length" class="input-count">{{keyword.length}}</span>
    </div>
    <div>

0 commentaires

0
votes

Vous devrez utiliser CSS pour y parvenir. Parce que vous ne pouvez pas obtenir quelque chose comme celui-ci dans la zone d'entrée:

du texte dans l'entrée 18 code> p>

Il y a à une autre div se chevauchant votre boîte d'entrée. Voir ceci: p>

p>



<div class='container'>
  <label class="label is-capitalized">Description One </label>
    <div class="field">
      <div class="control is-expanded relative inline-block">
        <input type="text" class='input' id="inp" placeholder="description one" />
        <div id='counter' class='absolute'>
        
        </div>
      </div>
   <div>
</div>

0 commentaires