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
