• Main Menu
  • 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.

    Got Something To Say:

    Your email address will not be published. Required fields are marked *

    Programming
    167 queries in 0.577 seconds.