CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Luis
Luis

Reputation: 13

Character counter showing within the input field

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

Upvotes: 1

Views: 6446

Answers (3)

Riddhi
Riddhi

Reputation: 2244

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.net/zr968xy2/4/

Upvotes: 0

Jayendra Sharan
Jayendra Sharan

Reputation: 1018

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.

Upvotes: 3

nmanikiran
nmanikiran

Reputation: 3158

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

Upvotes: 5

Related Questions