Почему нельзя установить фокус на элементе с помощью nextElementSibling.focus () и parentNode.children [0] .focus ()? - PullRequest
Новая
       7

Почему нельзя установить фокус на элементе с помощью nextElementSibling.focus () и parentNode.children [0] .focus ()?

0 голосов
/ 02 октября 2018

Я хочу переместить фокус мыши, когда нажатие клавиши равно 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 которого равен "1-й", инажмите ввод, чтобы перейти к фокусу мыши на input, id которого равно «2-й».
При вводе некоторых символов, например test в input, id которых равен «4-й», инажмите enter, чтобы перейти к фокусу мыши на input, id которого равно «1-й».

Я проверил свой код, информация об ошибке не появляется, но она не может достичь моей цели.
Какисправить это?

breakpoint

Я установил точку останова на 23-й строке, но ничего не найдено.

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Согласно чату с 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: сценарий помещается в конец последнего ввода с идентификатором 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 для этого.

0 голосов
/ 02 октября 2018

Согласно обсуждению в чате, ваша проблема в том, что nextElementSibling в <br/>.Если вы не хотите использовать nextElementSibling.nextElementSibling, здесь вам могут помочь два варианта:

Либо:

Удалите <br> и используйте CSS, чтобы добавить необходимые margin-bottom.

Или:

Добавьте класс к вашим элементам input / textArea и используйте jQuery с функцией .next('className').В Javascript есть эквиваленты, но он добавит много ненужного кода.

Я определенно рекомендую первый вариант, чем загружать целую библиотеку, если единственным вариантом будет использование этой функции.

...