jquery - 切换到其包含的 div 后无法在文本区域内输入？

Question

切换到包含 div 的 (id="center") 后，无法在 textarea 中输入内容？

这是代码...

 <div id="north">North</div>
 <div id="west">West</div>
 <div id="center"><textarea></textarea></div> 

脚本

$(document).ready(function() {
    var divs = ["north", "west", "center"];
    var startIndex = 0;
    $(document).keydown(function(e) {
        if (e.which == 9) {
            $("div").css("border", "");
            $("#" + divs[startIndex]).css("border", "4px solid gray");
            startIndex++;
            if (startIndex === divs.length) {
                startIndex = 0;
            }
        }
        return false;
    });
});​

Answer 1

您在每次按键时都返回 false - 这会阻止您在 textarea 中输入

$(document).keydown(function(e) {
    if (e.which == 9) {
        $("div").css("border", "");
        $("#" + divs[startIndex]).css("border", "4px solid gray");
        startIndex++;
        if (startIndex === divs.length) {
            startIndex = 0;
        }
    }
    return false; // <--
});

如果要阻止默认选项卡行为，则应将其移动到if (e.which == 9)语句中

$(document).keydown(function(e) {
    if (e.which == 9) {
        $("div").css("border", "");
        $("#" + divs[startIndex]).css("border", "4px solid gray");
        startIndex++;
        if (startIndex === divs.length) {
            startIndex = 0;
        }
        return false; // <-- Move it here to prevent tab default behavior
    }        
});

或者，如果您不需要阻止 keydown 上的任何默认行为，则可以完全删除它

Answer 2

您可以使用该.preventDefault()方法停止默认事件。

$(document).ready(function() {
    var divs = ["north", "west", "center"];
    var startIndex = 0;
    $(document).keydown(function(e) {
        if (e.which == 9) {
            e.preventDefault()
            $("div").css("border", "");
            $("#" + divs[startIndex]).css("border", "4px solid gray");
            startIndex++;
            if (startIndex === divs.length) {
                startIndex = 0;
            }
        }

    });
});