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

debugcn 发表于 Dev

用户7988893

我想在 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">

我的期望：
当您输入一些字符时，例如test在input其id为“1th”，然后按回车键，鼠标焦点会跳转到input其id为“2th”的位置。
当您输入某些字符时，例如test在input其id“第 4 个”中，然后按 Enter 键，鼠标焦点会跳转到input其id“第 1 个”。

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

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

用户7988893

据聊聊callback。

1.Format1:script 在头部，添加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代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。