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)

jQuery Func只能使用一次Html5自动对焦

HTML

1 个答案: