javascript - Cannot give .focus() to an element of a dropdown menu - Stack Overflow

admin管理员组

文章数量:1246537

Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>.

When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus. Why ?

/

How to give the focus to a input contained in a dropdown menu with .focus() ?

---

Code :

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="maa">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" style="min-width: 250px;">
                    <li>
                        <div style="padding:4px 20px;">Link:</div>
                    </li>
                    <li>
                        <div style="padding:4px 20px;">
                            <input class="form-control" id="ha" type="text" placeholder="blabla" />
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

JS :

{
    var maa = document.getElementById('maa');
    console.log(maa);
    maa.addEventListener('click', function () {
        console.log($('#ha'));
        $('#ha').val('Bonjour');
        $('#ha').focus();
    });
};

Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>.

When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus. Why ?

http://jsfiddle/rzsmdg4f/1/

How to give the focus to a input contained in a dropdown menu with .focus() ?

---

Code :

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="maa">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" style="min-width: 250px;">
                    <li>
                        <div style="padding:4px 20px;">Link:</div>
                    </li>
                    <li>
                        <div style="padding:4px 20px;">
                            <input class="form-control" id="ha" type="text" placeholder="blabla" />
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

JS :

{
    var maa = document.getElementById('maa');
    console.log(maa);
    maa.addEventListener('click', function () {
        console.log($('#ha'));
        $('#ha').val('Bonjour');
        $('#ha').focus();
    });
};

• javascript
• jquery
• twitter-bootstrap
• drop-down-menu

Share Improve this question Follow asked Sep 30, 2014 at 21:02 BasjBasj 46.6k110110 gold badges452452 silver badges801801 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

jsFiddle Demo

The element exists at the time of the click, so changing its value and logging it will properly show the current state of the element. However, it has not been displayed yet and as a result focusing it will not really have any effect. You could probably refactor some small snippet in the library to expose a hook that you could use to make your focus work. Or, you could make the observation that in the very next event handler the element will be visible and use a small timeout.

maa.addEventListener('click', function () {
    console.log($('#ha'));
    $('#ha').val('Bonjour');
    setTimeout(function(){$('#ha').focus();},10);//timeout here
});

the simplest solution i came in mind is to just delay the focus. the reason its not focusing is because the element is not yet visible.

http://jsfiddle/xab7Leoq/

setTimeout(function() {
  $('#ha').focus();
}, 100);

another solution is to find out when its getting visible, and then do it. it may be a better solution yet more plicated. :)

edit1: stopping propagation:

// Prevents the propagation
$('#ha').click(function(ev) {
  ev.stopPropagation();
});

like in http://jsfiddle/xab7Leoq/

Figured I might as well post an answer, even if late... since this seems to work well and doesn't require setTimeout: http://jsfiddle/cvLbfttL/

$("#maa").focus(function () {
    $('#ha').val('Bonjour');
    $('#ha').focus();
    return false;
});
$('#ha').click(function(){return false;});

The anchor "maa" gets the focus when clicked, and it happens after the click callback/event returns. So you can do your code in the focus event instead. I couldn't figure out how to tab to the anchor inside JSFiddle, but I assume the code would also run if you set the focus to the anchor using some other method, but that should be fine I think, maybe even nice.

An example using callback function. Man avoid to use setTimeout() function, because the results are unpredictable.

http://jsfiddle/v62tdn9z/

var $maa=$('#maa'), $ha=$('#ha');

$maa.mousedown( function () {
    $ha.val('Bonjour');
    $maa.mousemove(function () { $ha.focus(); });
});

Having a tabindex on the element could be the solution. This worked in my case.

本文标签： javascriptCannot give focus() to an element of a dropdown menuStack Overflow