Question

我有这段代码：

<input type="text" id="search" autocompleteoff>

使用以下代码打开自动建议框：

<div class="search-results">
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
<a class="qss" href="www.domain.com/page1">Lorem Lipsum Dolar</a>
</div>

我正在使用此javascript在键盘箭头键的建议中移动：

$(document).ready(function() {
window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".qss");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "selected";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}   
});

当我按下回车键（键13）时，如何让这个javascript触发所选项目的点击

另请注意，当搜索输入字段被聚焦时，我已经附加了一个点击触发器，其中13带有我进入全局搜索结果页面。这是

$('#search').keypress(function(x){if(x.keyCode==13){q=$(this).val();if(q!=this.d‌efaultValue){
$('#vrid').click();
}

所以我想要一些条件，如果焦点是输入搜索结果页面（在键13上），否则如果专注于建议的项目，它需要该项目的href（在键13上）

请帮忙谢谢你们

Answer 1

假设正在将selected类添加到链接中，一旦按下回车键：

var location = $(".selected")[0].href;
window.location.href = location;

更新代码：

$("#search").keyup(function (e) {
    if (e.keyCode == 40)
        Navigate(1);
    if (e.keyCode == 38)
        Navigate(-1);
    if (e.keyCode == 13) {
        // say goodbye to the page!
        var location = $(".selected")[0].href;
        window.location.href = location;
    }
});

Answer 2

我不确定你想要达到的目标，但如果我按照你的描述理解，那么如果我是你的话，我会采用以下方法。

我建议使用dropdown而不是'div'来搜索结果。导航到搜索结果时，设置的重点是下拉菜单，而不是搜索“文本框”。当搜索结果项目集中在搜索文本框中设置链接文本时。当您按下回车键时，请同时处理文本框和下拉列表，如果下拉列表是聚焦导航浏览器到选定项目链接，如果文本框聚焦显示您的搜索页面。

希望这有帮助！

Answer 3

你知道我在这里说的是我的尝试...

＆＃13;

$( ".search-results" ).keypress(function( e ) {
  if ( e.which == 13 ) {
    e.preventDefault(); // to prevent the default behaviour.
     
    // write down your conditions you want to execute..
    
  }  
});

＆＃13;

嗨，你可以尝试这样可能有效

＆＃13;

$("div a").on("keypress",function(e){ // here div will be the container of the all <a> tags on which you want to get your url work.
  if(e.which == 13){ 
    //then over ride your code here for key press 13 and change the url
  }
});

＆＃13;

Answer 4

根据您的评论，以下代码是您为密钥13附加事件的方式，并假设链接具有selected类：

请查看以下内容是否适合您。请用此替换#search keypress的当前代码。

$('#search').keypress(function(x){
  if(x.keyCode==13){
    if ($('.selected').length) {
      var loc = $(".selected")[0].href;
      window.location.href = loc;
    } else {
      q = $(this).val();
      if (q!=this.d‌efaultValue) {
        $('#vrid').click();
      }
    }
  }
});

在this fiddle

中查看此操作

如何触发按键13

4 个答案: