Question

我想在光标放入输入框后立即更改输入搜索框的宽度。

然而，一旦用户点击任何未输入框的body元素，我希望宽度恢复到原始长度。但是，即使将光标放在搜索框中，程序似乎也会将宽度更改回原始长度。如何选择不是输入框的body元素。

<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

使用focus和blur事件：

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">

动画？嗯... .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>

仅限CSS

逻辑上我不会写上面的“废话”，如果可以使用从"auto"宽度到400px的CSS转换并返回...

但是如果你定义一个起始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">

Answer 2

您可以将动画与focus / blur个事件结合使用 https://jsfiddle.net/L84j4ykx/

＆＃13;

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

＆＃13;

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

＆＃13;

修改：为了防止在速度变化情况下完成动画时等待，您可以在stop()之前使用animate()进行每项活动

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery更改输入搜索框的宽度

2 个答案:

仅限CSS