Question

我有一个代码，用于添加带有输入字段值的li。该输入上有一个fadeToggle函数。我希望在它出现时关注它，并在它隐藏时不显示它。使用当前代码，它会在被隐藏之前获得焦点。

＆＃13;

$('button').on('click', function (event) {
   $('input[type="text"]').fadeToggle(250).focus();
});

$('input[type="text"]').on('keypress', function (event) {
    if (event.which === 13) {
        if ($(this).val() !== '') {
            var todoText = $(this).val();
            $(this).val('');
            $('ul').prepend('<li>' + todoText + '</li>');
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Groceries</h1>
  <button>add</button>
  <input type="text">
  <ul>
    <li>carrot</li>
    <li>onion</li>
  </ul>
</div>

＆＃13;

Answer 1

focus()事件在fadeToggle()完成之前执行。只需将其作为回调传递，它就可以正常工作

＆＃13;

$('button').on('click', function (event) {
    $('input[type="text"]').fadeToggle( 250 ,function() {
    $(this).focus();
  });
});

$('input[type="text"]').on('keypress', function (event) {
    if (event.which === 13) {
        if ($(this).val() !== '') {
            var todoText = $(this).val();
            $(this).val('');
            $('ul').prepend('<li>' + todoText + '</li>');
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Groceries</h1>
  <button>add</button>
  <input type="text">
  <ul>
    <li>carrot</li>
    <li>onion</li>
  </ul>
</div>

＆＃13;

Answer 2

在设置焦点之前，您需要等待fadeToggle（）事件完成。

$('button').on('click', function (event) {
   $('input[type="text"]').fadeToggle( 250 ,function() {
    $(this).focus();
  });
});

http://jsfiddle.net/o5yq4ajn/9/

Answer 3

如果您设置了document.ready()事件处理程序，则可以为input提供初始焦点。然后，如果您向 .fadeToggle() 提供可选的完成函数参数，它将在效果完成后运行，此时您可以确定是否应该应用焦点（不是＆＃39） ;如果它不可见，那就有意义了。

＆＃13;

$(function(){
  let input = $('input[type="text"]');
  input.focus(); // Give input initial focus
 
  $('button').on('click', function (event) {
    input.fadeToggle(250, function(){
      // If the input is visible, give it the focus, if not don't
      input.css("opacity") !== 0 ? input.focus() : input.blur();
    });
    
  });

  $('input[type="text"]').on('keypress', function (event) {
    if (event.which === 13) {
        if ($(this).val() !== '') {
            var todoText = $(this).val();
            $(this).val('');
            $('ul').prepend('<li>' + todoText + '</li>');
        }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Groceries</h1>
  <button>add</button>
  <input type="text">
  <ul>
    <li>carrot</li>
    <li>onion</li>
  </ul>
</div>

＆＃13;

Answer 4

您可以将回调传递给函数fadeToggle：

$('input[type="text"]').fadeToggle(250, function() {
   this.focus();
});

推荐：存储实时jQuery对象，以避免重复查找'input[type="text"]'

var $input = $('input[type="text"]');

＆＃13;

var $input = $('input[type="text"]');
$('button').on('click', function(event) {  
  $input.fadeToggle(250, function() {
    this.focus();
  });
});

$input.on('keypress', function(event) {
  if (event.which === 13) {
    if ($(this).val() !== '') {
      var todoText = $(this).val();
      $(this).val('');
      $('ul').prepend('<li>' + todoText + '</li>');
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Groceries</h1>
  <button>add</button>
  <input type="text">
  <ul>
    <li>carrot</li>
    <li>onion</li>
  </ul>
</div>

＆＃13;

`fadeToggle`

complete（回调）

输入：功能（）

动画完成后调用的函数，每个匹配元素调用一次。

当我隐藏它时，如何防止对输入的关注（jQuery）？

4 个答案:

`fadeToggle`