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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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:

filter_none

edit
close

play_arrow

link
brightness_4
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) ;
     }
}) ;

chevron_right


Output:

Browser Compatibility:

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

full-stack-img




My Personal Notes arrow_drop_up

Recommended Posts:


Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.