JQuery change input window width

Question

I would like to change the width of the input field as soon as the cursor has been placed in the input field.

However, as soon as the user clicks on any body element that is not an input field, I would like the width to return to its original length. However, it seems that the program also changes the width back to its original length, even when the cursor is placed in the search field. How to select a body element that is not an input field.

<form class="search" action="/search">
   {% if settings.search_option != "everything" %}
     <input type="hidden" name="type" value="product" />
   {% endif %}
   <input type="text" name="q" class="search_box" 
    placeholder="{{ 'general.search.placeholder' | t }}" 
    value="{% if search and search.results.first.price %}{{ search.terms }}
   {% endif %}"/>
</form>

var input = $(this).find('input[name="q"]');

/* Part A: Change the width of the search input box to 600px when cursor was 
   click on the search box. When I comment out part B, 
   then the width will change to 600px. 
   If I does not comment out part B, the width does not change */

input.bind('click', function(){ 
   console.log("width changed");
   $(this ).css({'width' : '600px'});
});

/* Part B: When user click on any body element which is not the input box,
    change the width of the input box back to original length. 
    This code below does not work the way I want. When the cursor was placed 
    in the input box, it also executes this part of code,which is remain at its 
    original length */

$("body:not(.search_box)").bind('click', function(){ 
   $('input:text').css({'width' : 'inherit'}); 
});

/* Part B: I also tried code below, but does not return the result which I want */

$("body *:not(input:text)").bind('click', function(){ 
   $('input:text').css({'width' : 'inherit'}); 
});

/* hide the search result when click on input box and body*/
$('body').bind('click', function(){
   $('.search-results').hide();  
});

Answer 1

use focusand blurevents:

var input = $('input[name="q"]');

input.on("focus blur", function(evt) {
  $(this).css({width: evt.type=="focus" ? "400px" : "auto" });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="q" type="text">

Run codeHide result

Animate? ... .animate() , , , .

var input = $('input[name="q"]');


input.on("focus blur", function(evt) {
  
  if($(this).is("animated")) return;    // Do nothing while animating

  var isFocus = evt.type=="focus";      // Detect event type
  if(isFocus) this.w = $(this).width(); // On focus remember the element initial Width
  $(this).animate({width: isFocus ? 400 : this.w }); // Finally
  
}).on("input", function() {
  
  $(this).trigger("blur");              // Trigger a blur if user selects a dropdown value
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><input name="q" type="text"></span>

Hide result

CSS

"", CSS "auto" 400px ...

CSS, CSS!

input[name=q]{
  width:180px;     /* NEEDED */
  transition:0.3s; -webkit-transition: 0.3s;
}
input[name=q]:focus{
  width:320px;
}

<input name="q" type="text">

Hide result

Answer 2

focus/blur https://jsfiddle.net/L84j4ykx/

$('.inp').on('focus', function () {
  $(this).animate({
    width: '400px'
  }, 1000, function () {

    $(this).on('blur', function () {
      $(this).animate({
        width: '200px'
      }, 1000);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input class="inp" type="search" name="q">

Hide result

---

: , stop() animate()

$('.inp').on('focus', function () {
  $(this).stop().animate({
    width: '400px'
  }, 1000, function () {
  
    $(this).on('blur', function () {
      $(this).stop().animate({
        width: '200px'
      }, 1000);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inp" type="search" name="q">

Hide result