jQuery函数只工作一次Html5自动对焦

jQuery Func Only Works Once Html5 autofocus

本文关键字：Html5 一次 函数 工作 jQuery      更新时间：2023-09-26

我有一个带有搜索栏和这些功能的移动应用程序:

$(".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是点击(或点击)触发淡出功能的地方。

遗憾的是它只自动对焦一次。它也搞砸了fadeIn时，它的工作。之后，我必须刷新页面，让它再次自动对焦。

这个YouTube视频展示了我想要完成的:https://www.youtube.com/watch?v=T5n3m2LRy5Y

设置自动聚焦属性不会导致焦点改变。相反，您应该使用.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)
相关文章：