отправка формы ванильного скрипта с клавишей ввода - PullRequest
Новая
       0

отправка формы ванильного скрипта с клавишей ввода

0 голосов
/ 31 марта 2020

Мне не нравится использовать библиотеки, поэтому я хочу использовать ванильный скрипт. код, который я использую, показан ниже.

Мне нужно заполнить формы, используя только клавиатуру.

Что я сделал до сих пор - автоматическая фокусировка на первом текстовом поле, затем клавиша ввода для перехода к следующим текстовым полям.

Проблема в том, что после того, как кнопка «Сосредоточено» отправлена, и после того, как я нажму клавишу «Ввод», она фокусируется обратно на первое текстовое поле вместо отправки формы.

Пожалуйста, помогите ... 

window.onload=function(){
      
var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
   inputs[i].addEventListener("keypress", function(e){
      if (e.which == 13) {
         e.preventDefault();
         var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
         if (nextInput.length === 0) {
            nextInput = document.querySelectorAll('[tabIndex="1"]');
         }
         nextInput[0].focus();
      }
   })
}

    }
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" tabindex= "1" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe" tabindex= "2"><br><br>
  <input type="submit" value="Submit" tabindex= "3">
</form> 
</body>
</html>

Ответы [ 3 ]

1 голос
/ 31 марта 2020 
I hope this example will help you solve your problem.   


 <!DOCTYPE html>
    <html>
    <body>

    <h3>Trigger Button Click on Enter</h3>
    <p>Press the "Enter" key inside the input field to trigger the button.</p>

    <input id="myInput" value="Some text..">
    <button id="myBtn" onclick="javascript:alert('Hello World!')">Button</button>

    </body>
    </html>

    <script>
    var input = document.getElementById("myInput");
    input.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) {
       event.preventDefault();
       document.getElementById("myBtn").click();
      }
    });
    </script>
1 голос
/ 31 марта 2020

В вашем коде у вас есть блок if, проверяющий, является ли он последним вводом, просто запустите там код отправки: 

window.onload=function(){
      
var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
   inputs[i].addEventListener("keypress", function(e){
      if (e.which == 13) {
         e.preventDefault();
         var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
         if (nextInput.length === 0) {
            // Run submit function here
            alert("Done!");
         } else {
            nextInput[0].focus();
         }
      }
   })
}

    }
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" tabindex= "1" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe" tabindex= "2"><br><br>
  <input type="submit" value="Submit" tabindex= "3">
</form> 
</body>
</html>
0 голосов
/ 31 марта 2020

Вы можете удалить весь свой код JS и просто изменить фокус с помощью клавиши «Tab», а когда кнопка сфокусирована, нажмите «Enter», чтобы отправить вашу форму.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...