Question

我想在按下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为“ 1”的input中键入某些字符（例如id）并按Enter键时，鼠标焦点会跳到{{1 }}是“第二名”。
当您在input为“ 4th”的id中键入某些字符（例如test）并按Enter键时，鼠标焦点跳到{{1 }}是“第1个”。

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

我已在第23行设置了断点，但仍然找不到任何内容。

Answer 1

根据聊天讨论，您遇到的问题是nextElementSibling中的<br/>。如果您不想使用nextElementSibling.nextElementSibling，有两种方法可以在这里为您提供帮助：

要么：

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

或者：

在您的input / textArea元素中添加一个类，并使用具有功能.next('className')的jQuery。 Javascript具有等效功能，但会添加很多不必要的代码。

如果唯一的用途是一个函数，我绝对建议您选择第一个选项，而不是加载整个库。

Answer 2

根据与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：脚本位于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（）将焦点设置在元素上？

2 个答案: