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.

I think this is not trivial. You could generate a invisible span which always contains the same content as your inputbox. and then measure it's width. — Paflow
– Paflow, Commented Jun 1, 2017 at 8:52
Maybe you can use this: stackoverflow.com/a/21015393/4108884 as a workaround — Samuil Petrov
– Samuil Petrov, Commented Jun 1, 2017 at 8:53
There exists another dependency: The font it self. The width of each letter in every font have a different width. Even the letters have different width. In examplate: the 'i' is defnitly smaller than 'w'. — Reporter
– Reporter, Commented Jun 1, 2017 at 8:58

jonschlinkert · Accepted Answer · 2022-04-19 00:45:13Z

27

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

edited Apr 19, 2022 at 0:45

jonschlinkert

11k4 gold badges45 silver badges52 bronze badges

answered Jun 1, 2017 at 9:05

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leon Adler Over a year ago

This allows pasting images, tables and formatting from other programs. Contenteditable is everything but trivial.

R3tep Over a year ago

@LeonAdler Right, I post another way, to get more choice.

WizardCoder · Accepted Answer · 2017-06-01 12:58:33Z

12

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>

edited Jun 1, 2017 at 12:58

answered Jun 1, 2017 at 9:03

WizardCoder

3,48111 silver badges20 bronze badges

7 Comments

Ferrybig Over a year ago

Downvoted, This opens the possibility for an HTML injection attack, use innerText instead of innerHTML for user provided data

WizardCoder Over a year ago

Thanks, I wasn't aware of that. I have updated the answer.

Dan Over a year ago

@Ferrybig I'm curious to know how?

WizardCoder Over a year ago

I think it has something to do with InnerText stripping out any HTML tags e.g. someone could enter a malicious code <script>if(theirMoney > myMoney) { return theirMoney; }</script>;

Solomon Ucko Over a year ago

@WizardCoder When you are reading its value, yes, the content is converted to text, removing the tags. But when writing its value, the tags are escaped, not removed.

|

Liro Dasmaz · Accepted Answer · 2017-06-01 23:50:12Z

11

Canvas measureText() method can be helpful in such a case. Call the following function whenever you need to get your text width:

function measureMyInputText() {
    var input = document.getElementById("txtid");
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var txtWidth = ctx.measureText(input.value).width;

    return txtWidth;
}

For more accurate result, you may set font styling to the canvas, especially if you set some font properties to the input. Use the following function to get the input font:

 function font(element) {
     var prop = ["font-style", "font-variant", "font-weight", "font-size", "font-family"];
     var font = "";
     for (var x in prop)
         font += window.getComputedStyle(element, null).getPropertyValue(prop[x]) + " ";

     return font;
 }

Then, add this line to the frist function:

ctx.font = font(input);

edited Jun 1, 2017 at 23:50

answered Jun 1, 2017 at 18:26

Liro Dasmaz

4332 silver badges7 bronze badges

1 Comment

antonj Over a year ago

Add 'letter-spacing' to list of props?

Nadir Laskar · Accepted Answer · 2017-06-01 14:50:56Z

6

UPDATE

Two things I want to put forward

Doing display none will not give you any offsetWidth if we are trying using vanilla JS. we can use visibility: hidden; or opacity:0 for that.

we need to add overflow:auto to the hidden span or else the text will be warped to the next line if it exceeds the browser window width and the width will stay fixed (width of window)

OLD

You can try this approach

Add a span and hide it

<span id="value"></span>

and then onkeyup add the text of the textfield on your hidden span and get its width.

WITH THE HELP OF JQUERY

SNIPPET (UPDATED)

function update(elm,value) {
     $('#value').text(value);
     var width =   $('#value').width();
     $('#result').text('The width of '+ value +' is '+width +'px');
   
}

#value{
  display:none;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

USING JS ONLY

SNIPPET (UPDATED)

function update(elm,value) {
     var span = document.getElementById('value');
     span.innerHTML = value;    
     var width = span.offsetWidth;
     document.getElementById('result').innerHTML = 'The width of '+ value +' is '+ width+ 'px';
   
}

#value{
  opacity:0;
  overflow:auto;
}

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

edited Jun 1, 2017 at 14:50

answered Jun 1, 2017 at 9:07

Nadir Laskar

4,1702 gold badges19 silver badges33 bronze badges

7 Comments

Rohit Kumar Over a year ago

If enter 1 in the text box I get "The length is of is 0".

Rohit Kumar Over a year ago

it's working now but the user wants using javascript.

Nadir Laskar Over a year ago

you are pasting it not typing

Rohit Kumar Over a year ago

@nadir-lasker Caught if fixed this issue it would be perfect.

Nadir Laskar Over a year ago

You can use onchange event for that

|

Tofandel · Accepted Answer · 2022-02-25 08:34:29Z

4

Using the above solution, I turned it into a single function.

let getWidth = (fontSize, value) => {
  let div = document.createElement('div');
  div.innerText = value;
  div.style.fontSize = fontSize;
  div.style.width = 'auto';
  div.style.display = 'inline-block';
  div.style.visibility = 'hidden';
  div.style.position = 'fixed';
  div.style.overflow = 'auto';
  document.body.append(div)
  let width = div.clientWidth;
  div.remove();
  return width;
};
getWidth('10px', 'test');

edited Feb 25, 2022 at 8:34

Tofandel

3,6651 gold badge42 silver badges59 bronze badges

answered Apr 7, 2020 at 19:58

tanner burton

1,1691 gold badge15 silver badges17 bronze badges

Comments

pie6k · Accepted Answer · 2023-05-30 11:06:30Z

Here is my approach:

I create a fake 'span' element, which copies all font styles of the input element, then measures it's width

function measureInputValueWidth(input: HTMLInputElement): number {
  const span = document.createElement("span");
  span.style.whiteSpace = "pre";
  span.style.fontFamily = input.style.fontFamily;
  span.style.fontSize = input.style.fontSize;
  span.style.fontWeight = input.style.fontWeight;
  span.style.fontStyle = input.style.fontStyle;
  span.style.letterSpacing = input.style.letterSpacing;
  span.style.textTransform = input.style.textTransform;
  span.style.padding = input.style.padding;
  span.style.margin = input.style.margin;
  span.style.border = input.style.border;
  span.style.boxSizing = input.style.boxSizing;
  span.style.position = "absolute";
  span.style.left = "-9999px";
  span.style.top = "-9999px";
  span.innerText = input.value;
  document.body.appendChild(span);
  const width = span.getBoundingClientRect().width;
  document.body.removeChild(span);
  return width;
}

function updateInputWidthToMatchValue(input: HTMLInputElement) {
  input.style.width = `${measureInputValueWidth(input)}px`;
}

Collectives™ on Stack Overflow

Get input text width when typing

6 Answers 6

I see two ways.

2 Comments

7 Comments

1 Comment

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

I see two ways.

2 Comments

7 Comments

1 Comment

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related