I have an input field and I want to be able to show the length of characters being typed in but I want it to be within the input box all the way to the end of the input box. I'm not even sure where to start to do this.

Not really sure where to start.

<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'
 }
})

A counter within the input field pulled to the right edge

I have an input field and I want to be able to show the length of characters being typed in but I want it to be within the input box all the way to the end of the input box. I'm not even sure where to start to do this.

Not really sure where to start.

<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'
 }
})

A counter within the input field pulled to the right edge

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Feb 5, 2019 at 6:10 Luis Luis 1311 silver badge44 bronze badges 3

• 1 You can always use CSS: jsfiddle/khrismuc/1jm4yhsk – user5734311 Commented Feb 5, 2019 at 6:31
• @chrisG This works in the fiddle but not my project. I pinned it down to Bulmba being the cause of the problem. Those classes in my html are classes from Bulma. Here's a fiddle with the library added. Any way to make it work with this library on tehre? jsfiddle/hvg1e7ns/1 – Luis Commented Feb 5, 2019 at 6:55
• 1 jsfiddle/khrismuc/s8cuabkx – user5734311 Commented Feb 5, 2019 at 7:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

this can be handled in CSS in many ways

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

You'll have to use CSS to achieve this. Because you cannot get something like this within the input box:

some text in input 18

There has to another div overlapping your input box. See this:

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>

You can add additional styling if needed.

Try this

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

Check the below fiddle for the solution https://jsfiddle/zr968xy2/4/