javascript - jQuery 函数仅适用于一次 Html5 自动对焦

Question

我有一个带有搜索栏和以下功能的移动应用:

$(".dk").hide(0);
  $("#fus").click(function () {
      $(".dk").fadeOut(100);
      $("#sim").removeAttr("autofocus")
  });
 $("#ys").click(function (e) {
    $("#s,#u,#n,#l,#a,#m,.dk").hide(100);
    $("#re,#r").animate({"margin-left": "0px"}, 200);
    $("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
    $("#sim").delay(300).attr({"autofocus": "autofocus"});
    $(".dk").fadeIn(100);       
    e.stopPropagation();
    });
 })

HTML

<div style="padding-top:10px;" id="toolbar"> <a href="#" id="open-left"></a> <div class="tbar"> <img style="height:30px;" src="img/cles.png" /> <div class="ha"> <img id='ys' style=" height:27px" src="img/searchico.png" /> </div> </div> </div> <div class='dk'> <form id="hif"> <input id='sim' type="search"> <img style="position:absolute;height:26px;margin-left:-270px;margin-top:20px;" src="img/searchicog.png"> </form> </div>

我正在尝试淡入和淡出 div .dk (又名搜索框)。 #Ys是搜索图标，#sim是输入字段，#fus是单击(或点击)以触发 fadeOut 函数的位置。

不幸的是它只能自动对焦一次。它还弄乱了 fadeIn当它起作用时。之后，我必须刷新页面才能再次自动对焦。

这段 YouTube 视频展示了我想要实现的目标:https://www.youtube.com/watch?v=T5n3m2LRy5Y

Answer 1

设置自动对焦属性不会导致焦点发生变化。相反，您应该使用 .focus() 方法。

$(".dk").hide(0);
  $("#fus").click(function () {
      $(".dk").fadeOut(100);
      $("#sim").removeAttr("autofocus")
  });
 $("#ys").click(function (e) {
    $("#s,#u,#n,#l,#a,#m,.dk").hide(100);
    $("#re,#r").animate({"margin-left": "0px"}, 200);
    $("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
    $("#sim").delay(300).focus();
    $(".dk").fadeIn(100);       
    e.stopPropagation();
    });
 })

此外，.delay 不会延迟非动画，因此要延迟焦点，您需要使用 setTimeout。

setTimeout(function(){
    $("#sim").focus()
},300)