开发者

Disable tab key on a specific div

开发者 https://www.devze.com 2023-02-22 11:51 出处:网络
I have the following structure: <div id=\"wrapper\"> <div id=\"div1\">Some content</div>

I have the following structure:

<div id="wrapper">
   <div id="div1">Some content</div>
   <div id="div2">Some content</div>
<开发者_如何学Python;/div>

I want to "disable" the tab key on div2, I mean the elements of div2 won't receive focus when the tab key is pressed.

Is there any easy way to create this tab key blocker using javascript/jquery?


@John Strickler is right. The behaviour of the tab key can be changed with the tabindex attribute. It is the order the elements will have the focus.

With <div id="div1" tabindex="-1">Some content</div> you should prevent the focus to be on your div.

More info here: http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html


There's a fairly simple way of doing this, using jQuery's focus() method. Given the following, simplified, html:

<div id="first">
    <label for="first">Can tab to this input</label>
    <input type="text" id="first" />
</div>
<div id="second">
    <label for="second">Can't tab to this input</label>
    <input type="text" id="second" />
</div>
<div id="third">
    <label for="third">Can tab to this input</label>
    <input type="text" id="third" />
</div>

And the jQuery:

$('#second input').focus(
    function(){
        $('#third input:first').focus();
    });

JS Fiddle demo.

This is, slightly, over-simplified though. If you post your exact mark-up we might be able to offer something a little more...tailored?

It also, in the above implementation, prevents the input being focused via the click event, as well as the tab, which reduces the usefulness, I'd imagine.


Edited to revise the above code, to differentiate between focus from mouse-click and keyboard-tab:

$('#second input').bind('keyup mouseup',
                        function(e){
                            if (e.which == 9) {
                                // focus from tab
                                $('#third input:visible:first').focus();
                            }
                            else if (e.which == 1) {
                                // focus from click
                                return false;
                            }
                            else {
                                alert('God only knows, what buttons are you mashing..?');
                            }
                        });

Revised JS Fiddle demo.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号