为什么不能使用 nextElementSibling.focus() 和 parentNode.children[0].focus() 将焦点设置在元素上？

Question

我想在 keydown 为 enter 时移动鼠标焦点，以将 enter 模拟为 tab。

function  jump(event){
    var  ob = event.target;
    if(event.keyCode ==  13){
        if(ob.nextElementSibling){
            ob.nextElementSibling.focus();
        }
        else{
            ob.parentNode.children[0].focus();
        }
    }
}
document.body.addEventListener("keydown",jump,true);

content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">

我的期望：
当你在 input 中键入一些字符，例如 test 其中 id 是“1th”，然后按回车，鼠标焦点跳到 input 其 id 是 "2th".
当你在id是“4th”的input中输入一些字符，比如test，然后回车，鼠标焦点跳到input，id =] 是“第 1”。

我测试了我的代码，没有出现错误信息，但它无法实现我的目标。
如何解决？

我在第23行设置了断点，还是没有找到。

Answer 1

根据聊天讨论，您的问题是 <br/> 中的 nextElementSibling。如果您不想使用 nextElementSibling.nextElementSibling，这里有两个选项可以帮助您：

或者：

删除 <br> 并使用 CSS 添加必要的 margin-bottom。

或者：

将 class 添加到 input/textArea 元素，并使用 jQuery 和函数 .next('className')。 Javascript中有等价物，但会增加很多不必要的代码。

如果唯一的用途是那个函数，我绝对推荐第一个选项而不是加载整个库。

Answer 2

根据与callback的聊天记录。

1.Format1:脚本在最前面，添加window.onload。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<script>
window.onload = function(){
function  jump(event){
    var  ob = event.target;
    if(event.keyCode ==  13){
        if(ob.nextElementSibling != null){
            ob.nextElementSibling.nextElementSibling.focus();
        }
        else {
            ob.parentNode.children[0].focus();
        }
    }
}
document.body.addEventListener("keydown",jump,true);
}
</script>
</head>
<body>
    content:<input id="1th" type="text">
    <br/>
    content:<textarea id="2th" cols=6 rows=5></textarea>
    <br/>
    content:<input id="3th" type="text">
    <br/>
    content:<input id="4th" type="text">
</body>
</html>

格式2:script放在id为4th的最后一个输入的末尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    content:<input id="1th" type="text">
    <br/>
    content:<textarea id="2th" cols=6 rows=5></textarea>
    <br/>
    content:<input id="3th" type="text">
    <br/>
    content:<input id="4th" type="text">
<script>
function  jump(event){
    var  ob = event.target;
    if(event.keyCode ==  13){
        console.log(ob.nextElementSibling.tagName);
        if(ob.nextElementSibling.tagName == "BR"){
            ob.nextElementSibling.nextElementSibling.focus();
        }
        else if(ob.nextElementSibling.tagName == "SCRIPT"){
            ob.parentNode.children[0].focus();
        }
    }
}
document.body.addEventListener("keydown",jump,true);
</script>
</body>
</html>

整个代码都是位置相关的，不同的脚本内容在html文件中的位置，应该写不同的js代码。

为什么不能使用 nextElementSibling.focus() 和 parentNode.children[0].focus() 将焦点设置在元素上？

Why can't set focus on element with nextElementSibling.focus() and parentNode.children[0].focus()?

javascript

keycode

nodes