Open In App

How to Adjust the Width of Input Field Automatically using JavaScript ?

Last Updated : 16 Apr, 2020
Like Article

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. The HTML <input> width attribute is used to specify the width of the element.

To increase the width of <input> element dynamically.
Approach 1:

  • The onkeypress event occurs when the user presses any key.
  • Select the width attribute of an element.
  • Make it equal to the length of the value of the input field by this.value.length
<input type="text" onkeypress="myFunction()"> 

Here, we select the <input> element and add a method to it which occurs when a key is pressed. This method selects and updates the value of the width property dynamically.

HTML Code:

<!DOCTYPE html> 
    <title> How to adjust width of 
an input field to its input?</title> 
    <form method="post" action="">
        <label for="username">Input text</label>
        <input type="text" id="textbox" 
        name="textbox" placeholder="Welcome"
        onkeypress=" = 
            ((this.value.length + 1) * 8) + 'px';"

You can also write a JavaScript function to check the length of your string on input change, then adjust the width of the input based on the number of chars * character width.

Alternative JavaScript Code:

$('input').css('width', ((
  input.getAttribute('placeholder').length + 1) * 8) + 'px');
$("input").focusout(function() {
    if (this.value.length > 0) { = 
          ((this.value.length + 1) * 8) + 'px';
    } else { = 
          ((this.getAttribute('placeholder').length + 1) * 8)
        + 'px';


Approach 2: Use jQuery keypress() event in combination with String.fromCharCode(e.which) to get the pressed character. Hence, we can calculate the width of the input element.

jQuery Code:

$('input[type="text"]').keypress(function(e) {
    if (e.which !== 0 && e.charCode !== 0) { 
        // Only characters
        var c = String.fromCharCode(e.keyCode|e.charCode);
        $span = $(this).siblings('span').first();
        // The hidden span takes 
        $span.text($(this).val() + c) ; 
        // The value of the input
        $inputSize = $span.width() ; 
        // Apply width of the span to the input
        $(this).css("width", $inputSize) ;
}) ;


Browser Compatibility:

  • Chrome: Yes
  • Firefox: Yes (63.0)
  • Edge: Yes
  • Internet Explorer: Yes
  • Opera: Yes
  • Safari: Yes

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads