How to auto-adjust the width of an input field based on character length of the decimal displayed within?

Question

I'm working on a very simple program that takes a user-specified number (can be an integer or a float of any length) and performs one specific multiplication operation on that number. The program then displays the result of the equation in a separate read-only input field. The output value may be a decimal of any length (I haven't set a step to limit its character length) so the output could be something like "12.1", or it could be something like "259.000003889".

<input type="text" id="inputValue" name="human age" /> <!-- The text area where the user inputs the number value of their choice - NOT the one I want to change the width of. -->

<input type="button" id="submit" name="submit age" value="calculate" onclick="calculateAge()" /> <!-- Button that submits the user-inputted number and activates the calculateAge function. -->

<input type="number" id="outputValue" name="converted age" readonly /> <!-- The text area where the result of the equation is displayed. This is the one whose width I want to change according to its content. -->

<script>

//Simple calculate function that takes the input value by its ID and multiplies it by a static decimal, then sets that end value to be the output value.
function calculateAge() {
  let inVal = document.getElementById('inputValue').value;
  let outVal = document.getElementById('outputValue').value = inVal * 0.4893
}

let calculate = document.getElementById('submit');
calculate.addEventListener('click', calculateAge());

</script>

The end value is supposed to represent a length of time (it's a fantasy project that converts human age to an equivalent fictional creature age.) Because of this, I have text that says "years" after the number, separate from the input field.

Only problem is, I want the width of the input field to dynamically adjust itself based on the character length of the result number that is displayed in it. (Really just for appearance purposes, so the end result looks more fluid, but it's an important feature to me.) I've tried a few different online tutorials and they haven't worked thus far - not sure why. I don't get error messages, the program continues to work as intended but I get no change to the input field width.

I have no styling or specific fonts set for this program, it's all default font, default sizing, in black-and-white. That is to say, there is no unusual font size/weight/style present that might disturb the width of the text field.

Any suggestions? None of the tutorials I've tried have worked and it's really bugging me - I know it's something I've probably done wrong or forgotten to do, advice would be appreciated!

Does it have to be a read-only input field? How about an output element instead? That one can easily adapt to the width of its content, with no extra scripting. — C3roe
– C3roe, Commented Oct 28 at 7:28

KIKO Software · Accepted Answer · 2025-10-27 23:57:54Z

This worked for me:

function calculateAge() {
  let input = document.getElementById('inputValue');
  let output = document.getElementById('outputValue');
  output.value = input.value * 0.4893;
  output.style.width = (30 + 7 * output.value.toString().length) + "px";
}

let calculate = document.getElementById('submit');
calculate.addEventListener('click', calculateAge());

<input type="text" id="inputValue" name="human age">
<input type="button" id="submit" name="submit age" value="calculate" onclick="calculateAge()">
<input type="number" id="outputValue" name="converted age" readonly>

You control the width of the output with a style property: output.style.width. This property needs a CSS length in pixels, which is what is calculated from the length of the output number. To get this length you need to convert it to a string using toString().

Note that self closing HTML tags do not require /> at the end of the tag in HTML5.

herrstrietzel · Accepted Answer · 2025-10-28 17:11:22Z

Since you're only dealing with numbers you can define the fields width using relative ch units – describing the width of the digit 0.

The benefit of ch unit is that it respects the design widths of any font family: so 1ch returns a larger absolute width (in pixels) for a wider (e.g extended) font than for a condensed one.

function calculateAge() {
  let input = document.getElementById('inputValue');
  let output = document.getElementById('outputValue');
  output.value = input.value * 0.4893;
  // text length
  let len = output.value.toString().length -0.25
  output.style.width = Math.max(2, len) + "ch";
}



let calculate = document.getElementById('submit');
calculate.addEventListener('click', calculateAge());

inputValue.addEventListener('input', (e)=>{
  calculateAge()
})

.outputValue{
  width:2ch;
}

<input type="text" id="inputValue" name="humanAge">
<input type="button" id="submit" name="submitAge" value="calculate" >
<input type="text" class="outputValue" id="outputValue" name="convertedAge" readonly>

In the above example we're calculating the width by its string length as suggested by KIKO Software and subtract 0.25ch to account for the decimal separator . or ,.

We're also changing the type to text to avoid the right-hand rendering of number input buttons (which also add some extra padding)

As commented by C3roe an output element is probably preferable in terms of semantics. The only downside of using <output> instead is that it requires some extra styling to match the <input> appearance.
On the other hand, read-only fields can be misleading for users as they are still focusable and not distinguishable from editable inputs.

Collectives™ on Stack Overflow

How to auto-adjust the width of an input field based on character length of the decimal displayed within?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related