输入字段中显示的字符计数器

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>