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> <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>                 |
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.style.width =Â Â Â Â Â Â Â Â Â Â Â ((this.value.length + 1) * 8) + 'px'; Â Â Â Â } else { Â Â Â Â Â Â Â Â this.style.width =Â Â Â Â Â Â Â Â Â Â Â ((this.getAttribute('placeholder').length + 1) * 8) Â Â Â Â Â Â Â Â + 'px'; Â Â Â Â } }); |
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:
$('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) ;      } }) ; |
Output:
Browser Compatibility:
- Chrome: Yes
- Firefox: Yes (63.0)
- Edge: Yes
- Internet Explorer: Yes
- Opera: Yes
- Safari: Yes
