javascript - 当我隐藏输入时，如何防止焦点集中在输入上(jQuery)？

Question

我有一个代码，它添加一个带有输入字段值的 li 。该输入上有一个 fadeToggle 函数。我想在它出现时聚焦它，而在它隐藏时不显示它。使用当前代码，它在隐藏之前获得焦点。

$('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>');
        }
    }
});

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

Answer 1

您需要等待 fadeToggle() 事件完成才能设置焦点。

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

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