Счетчик символов отображается в поле ввода

Question

У меня есть поле ввода, и я хочу иметь возможность показывать длину набираемых символов, но я хочу, чтобы оно находилось в пределах поля ввода вплоть до конца поля ввода.Я даже не уверен, с чего начать.

Не совсем уверен, с чего начать.

<label class="label is-capitalized">Description One </label>
   <div class="field">
      <div class="control is-expanded">
         <input type="text" class="input size19" placeholder="description one" v-model="keyword">
      </div>
   <div>

var app = new Vue ({
 el: '#app',
 data: {
  keyword: 'hello'
 }
})

Счетчик в поле ввода, тянущийся к правому краю

Answer 1

это может быть обработано в CSS разными способами

// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
  el: '#app1',
  data: {
    keyword: 'hello'
  }
});

.field {
  margin: 1em;
}

.input {
  padding-right: 30px;
}

.input-count {
  margin: -30px;
  opacity: 0.8;
}

<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>

Answer 2

Вам нужно будет использовать CSS для достижения этой цели.Потому что вы не можете получить что-то подобное в поле ввода:

some text in input 18

Там должен быть другой div, перекрывающий ваше поле ввода.Смотрите это:

var counter = document.getElementById ('counter'),
		input = document.getElementById ('inp');
    
counter.innerHTML = input.value.length;

input.addEventListener ('keyup', function (e) {
	counter.innerHTML = input.value.length;
});

.inline-block {
  display: inline-block;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
#counter {
  top: 0;
  right: 0
}

<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>

При необходимости можно добавить дополнительные стили.

Answer 3

Попробуйте это

  <div id="app1">
      <br>
          <div class="holder">
           <label>
                    {{keyword.length}}
                </label>
             <input type="text" class="input size19" placeholder="description one" v-model="keyword">
          </div>

CSS

holder {
  position: relative;
}

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

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

Проверьте приведенную ниже скрипку для решения https://jsfiddle.net/zr968xy2/4/