Change TextBox Width with JQuery on Focus and Blur

Let’s see how can we change the width of any HTML TextBox using JQuery on occurrence of following 2 actions: Focus and Blur. Focus is when you click anywhere inside a TextBox and Blur is when a TextBox isn’t active or focused.

Prerequisite: JQuery Library should already be included in the page.

Consider we have the following HTML code for displaying a TextBox.

<input type="text" id="mytextbox" />

You can give the above TextBox required initial width, say 200px.

Now, the following JQuery snippet will help change the width of above TextBox on Focus and Blur actions.

<script type="text/javascript" language="javascript">
     $(document).ready(function() {
          $('#mytextbox').focus(function() {
               $(this).animate({width: '350px'}, 500);
          });
 
          $('#mytextbox').blur(function() {
               $(this).animate({width: '200px'}, 500);
          });
     });
</script>

To achieve this, we make use of the animate function from the JQuery Library. In the above code, it makes use of 2 parameters:
1. {width: ‘350px’} – Width of the TextBox.
2. Time Delay – Time delay for the animation to take effect.