Get input text width when typing

Question

I have a input type text

<input type="text" id="txtid"> 

When i start typing text inside input, i should be able to get the lenght of the entered text.

This is what I tried:

document.getElementById("txtid").offsetWidth; 

and

var test = document.getElementById("txtid"); var width = (test.clientWidth + 1) + "px"; 

These two does not give the width of the text entered

Basically what I want is:

For suppose input text width is 320px. I need the width of the entered text i.e 120px, which keeps on changing when I enter.

Answer 1

I see two ways.

First:

You can use a div with content editable instead input. Like this you can see the width of the div.

var elemDiv = document.getElementById('a');    elemDiv.onblur = function() {    console.log(elemDiv.clientWidth + 'px');  }

div {    width: auto;    display: inline-block;  }

<div id='a' contenteditable="plaintext-only">Test</div>

Note : Like @Leon Adler say, this way allows pasting images, tables and formatting from other programs. So you maybe need some validation with javascript to check the content before get the size.

---

Second:

Use an input type text and past the content into an invisible div. And you can see the width of the invisible div.

var elemDiv = document.getElementById('a'),    elemInput = document.getElementById('b');    elemInput.oninput = function() {    elemDiv.innerText = elemInput.value;    console.log(elemDiv.clientWidth + 'px');  }

.div {    width: auto;    display: inline-block;    visibility: hidden;    position: fixed;    overflow:auto;  }

<input id='b' type='text'>  <div id='a' class='div'></div>

Note : For this way, you must have the same font and font size on input and div tags.

Answer 2

I have modified Chillers answer slightly, because it looks like you wanted the width rather than the letter count. I have created a span, which is absolute positioned off the screen. I am then adding the value of the input to it and then getting the width of the span. To make it more fancy you could create the span with javascript.

Note that the input and the span would have to have the same CSS styling for this to be accurate.

document.getElementById("txtid").addEventListener("keyup", function(){    var mrspan = document.getElementById("mrspan");    mrspan.innerText = this.value;    console.log(mrspan.offsetWidth + "px");  });

<input type="text" id="txtid">  <span id="mrspan" style="position:absolute;left:-100%;"></span>