如果用户键入任何内容,如何使用jquery .focus()元素

How to jquery .focus() element if user types anythign

本文关键字:jquery 何使用 focus 元素 用户 任何内 如果      更新时间:2023-09-26

我在父元素li上嵌套了一个鼠标悬停激活的ul。

所有的工作,除了我有一个搜索表单在飞出菜单,我希望这个输入字段集中,如果用户键入任何。

我好像搞不懂这部分,有什么主意吗?我现在是如何实现的,只有当我已经选择input并按下某个键时才有效,这是因为$this是input。

   //Flyout menu in big_header
   $(".flyout_big").removeClass("fallback");
   $("#head_big .categories > ul > li").hover(
    function() {
        //$('ul', this).stop().slideDown(100);
        $(".flyout_big", this).stop().fadeIn("fast");
        var offset = $(this).offset();
        $(".flyout_big .flyout_arrow", this).stop().animate({top:offset.top},"slow");
        //Activate-focus search field on any key-press
          $(document).on("keydown",function(e){
              //if (e.keyCode == 13) {  
              //    alert("enter");
              //} else if (e.keyCode == 27) {
              //    alert("esc");
              //}
              //alert("test");
              $(".search_field").focus();
          });
    },
    function() {
        //$('ul', this).stop().slideUp(100);
        $(".flyout_big", this).stop().fadeOut("fast");
    });
   //End floyout menu in big_header

Html:

<ul>
    <li>Test 1<br /><input type="text" /></li>
    <li>Test 2</li>
<ul>

脚本:

$(document).ready(function()
{
    $("ul > li").hover(function()
    {
        $("ul > li").removeClass('active');
        $(this).addClass('active');
    });
    $('html').on("keyup",function()
    {
        alert('test');
        $("ul > li").filter(".active").children('input').val('test').focus();
    });
});

jsFiddle(注意你首先必须在html框上点击一次):

http://jsfiddle.net/6hEwD/

使用此代码:

$('li *').hide();
$("ul > li").hover(function(){
    var $this = $(this);
    $this.find('*').show();
    $(document).on("keydown",function(){
        $this.children('input').focus();
    });
},
function(){
    var $this = $(this);
    $this.find('*').hide();
});

小提琴:http://jsfiddle.net/6hEwD/4/

当文档处于焦点位置并且你将div悬停时,你可以在input中输入