Question

我试图将鼠标焦点从文本字段移动到文本字段正下方的UL的第一个LI。我希望能够向上/向下滚动列表，然后按ENTER选择一个条目/行。点击ENTER键后，该行的某些值将用于填充其他字段。

文本字段上有onKeyUp触发器，这让事情变得有点棘手。我需要这个触发器，因为我需要在用户输入时查询数据库。

我想要实现的结果类似于google.com搜索。如果你去Firefox浏览google.com就会明白我的意思。

我尝试过像

这样的事情

$("#myUL").find('li').first().focus().addClass('some-class');

但它没有用。

如何将焦点转移到UL？

这是我的jsfiddle http://jsfiddle.net/98xUZ/

提前感谢您的帮助！

Answer 1

我在功能中试过这个：

function buildList(pThis) {

//    console.log(window.event.keyCode + " is pressed");

    var ul = $('#stnUL');
    var li = "";
    ul.empty('li');

    loc = dataObj.locations;

    li = '<li class="liHeading"><span class="liLocId">LocID</span><span class="liLocName">Name</span></li>';

    $.each(loc, function (i, o) {

        li += '<li tabindex="' + i + '" class="liLocList" onMouseOver="javascript:mOver(this);" onMouseOut="javascript:mOut(this);"><span class="liLocId">' + loc[i].locId + '</span><span class="liLocName">' + loc[i].name + '</span></li>';

    });

    $(ul).append(li);
    var itemPosArr = getItemBottomLeft(pThis.id);
    displayUL('ulDiv', itemPosArr[0], itemPosArr[1]);
    $("#ulDiv").show();
     $( "ul li" ).first().removeClass().css("background-color", "");   
    $( "ul li" ).first().addClass('active');

}

Answer 2

对于向上/向下箭头，您通常希望在可以提供帮助的情况下避免对这些事件进行编码。最佳选择是在li标签上设置tabindex属性并响应焦点事件。

如何将Focus从Text输入字段移动到UL的第一个LI？

2 个答案: