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.
- 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.
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.
- Chrome: Yes
- Firefox: Yes (63.0)
- Edge: Yes
- Internet Explorer: Yes
- Opera: Yes
- Safari: Yes