Question

我的页面上有一个搜索按钮http://rockingh.nextmp.net/

            <div class="menu-search-button" tabindex="0" ></div>
             <p>
             <input class="menu-search-field type" type="text" name="keywords" placeholder="Type keyword and hit enter" id="keywords" value="" size="18" maxlength="100" >
            </p>

有这个css：

/* 3.1 - Navigation Search */
.menu-search-button {
background: url(../images/search_icon.png),url(../images/dot_border_v.png);
background-position: center -18px, top left;
background-repeat: no-repeat, repeat-y;
background-color: #fff;
width: 80px;
height: 53px;
position: absolute;
right: 1px;
top: 1px;
z-index: 999;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.menu-search-button:hover {
background: url(../images/search_icon.png),url(../images/dot_border_v.png);
background-position: center -106px, top left;
background-repeat: no-repeat, repeat-y;
background-color: #fff;
cursor: pointer;
}

.menu-search-form {
float: right;
}

.menu-search-field {
background: url(../images/dot_border_v.png) top left repeat-y #f8f8f8 !important;
width: 0%;
height: 52px;
border: none !important;
float: right;
padding: 1px 0px;
color: #b0b0b0;
font-size: 12px;
opacity: 0;
position: absolute;
top: 1px;
right: 0;
-webkit-appearance: none;
border-radius: 0;
}

.menu-search-focus {
width: 280px;
padding: 1px 0 0 10px;
opacity: 10;
}

它与JQuery一起运行：

 // Search Button Toggle    
jQuery(".menu-search-button").click(function() {
    jQuery(".menu-search-field").toggleClass("menu-search-focus", 200);
});

我正在努力确保它可以访问。我添加了tabindex，它将显示焦点。实际输入也会得到关注，尽管你看不到它。如何在焦点有效时显示输入，或者甚至告诉菜单搜索字段还显示键盘操作？

我已经搜索了，这可能只是我糟糕的JQuery技能，为什么我无法让它工作。

Answer 1

jQuery允许您使用on函数为focus事件注册一个侦听器，就像您可以点击事件或任何其他事件一样：

$(".menu-search-field").on("focus", function(event) {
  console.log("search field has received focus");
  // show search field here...
});

并且您已经知道如何在触发事件时显示搜索字段，因为您已经在搜索按钮的点击处理程序（jQuery(".menu-search-field").toggleClass("menu-search-focus", 200);）中执行此操作。

所以把它们放在一起看看会发生什么。

在.onclick和元素从标签

1 个答案: