How to Adjust the Width of Input Field Automatically using JavaScript ?
Last Updated :
16 Apr, 2020
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) {
var c = String.fromCharCode(e.keyCode|e.charCode);
$span = $( this ).siblings( 'span' ).first();
$span.text($( this ).val() + c) ;
$inputSize = $span.width() ;
$( this ).css( "width" , $inputSize) ;
}
}) ;
|
Output:
Browser Compatibility:
- Chrome: Yes
- Firefox: Yes (63.0)
- Edge: Yes
- Internet Explorer: Yes
- Opera: Yes
- Safari: Yes
Share your thoughts in the comments
Please Login to comment...