How to increase input box size using javascript in HTML

In this article, we will explore how to dynamically increase the size of an input box using JavaScript. This functionality can be useful when you want to allow users to expand the input box for better visibility or input space.

Dynamically Increasing Input Box Size

To dynamically increase the size of an input box using JavaScript, you can utilize the onfocus event to trigger a function that adjusts the size of the input element. Here is an example:

<input type="text" style="width:100px" id="myInput" onfocus="expandInput()" placeholder="Click to expand">
<script>
  function expandInput() {
    document.getElementById("myInput").style.width = "200px";
  }
</script>

Explanation :

1. The CSS style sets the initial width of the input box to 100px.
2. The expandInput() function is triggered when the input box is focused.
3. Inside the function, we use document.getElementById() to select the input element by its id and update its style.width property to 200px, increasing its width.

Conclusion

In this article, we have learned how to dynamically increase the size of an input box using JavaScript in HTML. By utilizing the onfocus event and adjusting the CSS properties of the input element, we can create a user-friendly interface that allows users to expand the input box as needed.