Page Loading...
Run
Break Lines
Result
<!DOCTYPE html> <html> <head> <style> /* Add styles here */ </style> </head> <body> <h2>Increase input width dynamically:</h2> <div> <input type='text' placeholder='Type something..' oninput='adjustWidth(this);'> </div> <script> const maxLength = 100; // Set Max input length(100chars) function adjustWidth(input){ if(input.value.length==0){ // check if input box is empty input.style.width='initial'; }else if(input.value.length>20 && input.value.length<maxLength){ // Increase input width by 6 px on each key press // reserve some extra space(5*6px) for // better user experience input.style.width = (input.value.length*6)+(5*6) + 'px'; } } </script> </body> </html>