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

尝试一下

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

Answer 2

这可以在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 3

您必须使用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>

如果需要，您可以添加其他样式。

在输入栏中显示字符计数器

3 个答案: