Триггер кнопки, когда пользователь нажимает кнопку «Ввод»

Я хочу нажать кнопку, когда пользователь нажимает кнопку «Enter» внутри входа. Я пытался это сделать, но без успеха. Вот моя попытка:Триггер кнопки, когда пользователь нажимает кнопку «Ввод»

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Exercice 1</title> 
 
    <meta charset="utf-8"> 
 
    <script> 
 
    function key() { 
 
     if (event.keyCode == 13) { 
 
     document.getElementById('btn').click() 
 
     } 
 

 
     function test() { 
 
     alert('okay'); 
 
     } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <input type="text" placeholder="Write your word" onkeydown="key()" /> 
 
    </form> 
 
    <button id="btn" onClick="test()">test</button> 
 
</body> 
 

 
</html>

источник

2016-11-21 saadsaad

Цель состоит в том, чтобы предупредить об этом? Просто вызовите функцию, которая делает предупреждение – Ju66ernaut

Есть ли причина в форме кнопки? Таким образом, вы можете прослушать событие отправки. – hasanain

Все кажется правильным. Вы проверили синтаксис? – pcbabu

У вас есть ошибка синтаксиса. Вам просто не хватало закрывающей фигурной фигурной скобки, а ваше заявление if.

// Modern browsers send an event object to the event 
 
// callback function 
 
function key(evt){ 
 
    // But, older versions of IE expose the event as a property 
 
    // of the window object, so let's make sure we have a good 
 
    // reference to it: 
 
    evt = evt || window.event; 
 

 
    // Getting the key code has never been standardized 
 
    if (evt.which === 13){ 
 
    document.getElementById('btn').click(); 
 
    } // <-- You were missing this. 
 
} 
 
      
 
function test(){ 
 
    alert('okay'); 
 
}

<form> 
 
\t <input type="text" placeholder="Write your word" onkeydown = "key()"/> 
 
</form> 
 
<button id="btn" onClick="test()">test</button>

И мы действительно должны избегать встроенный HTML обработки событий, поскольку это нарушает разделение задач между HTML и JavaScript, это вызывает глобальную анонимную функцию прокси, который будет создан, который модифицирует this связывания в функции обратного вызова и не использовать современную W3C DOM Level 2 Event Handling standard

Вот современный способ подключить обработчик событий вверх:

window.addEventListener("DOMContentLoaded", function(){ 
 
    
 
    var btn = document.getElementById("btn"); 
 
    var txt = document.getElementById("txtInput"); 
 
    
 
    btn.addEventListener("click", test); 
 
    txt.addEventListener("keydown", key); 
 

 
    // Modern browsers send an event object to the event 
 
    // callback function 
 
    function key(evt){ 
 
     // But, older versions of IE expose the event as a property 
 
     // of the window object, so let's make sure we have a good 
 
     // reference to it: 
 
     evt = evt || window.event; 
 

 
     console.log("Callback function invoked by: " + evt.target); 
 
     console.log("Key pressed was: " + evt.which);  
 
     
 
     // Getting the key code has never been standardized until 
 
     // fairly recently. event.which is the recommended approach 
 
     if (evt.which === 13){ 
 
     document.getElementById('btn').click(); 
 
     } // <-- You were missing this. 
 
    } 
 
       
 
    function test(){ 
 
     alert('okay'); 
 
    } 
 
    
 
});

<input type="text" id="txtInput" placeholder="Write your word"> 
 
<button id="btn">test</button>

источник

2016-11-21 21:03:35

Кроме того, функция 'key' должна принимать аргумент' event' и проверять, если '(event || window.event) .keyCode == 13' для совместимости с большинством браузеров (я думаю, что глобальное событие - только IE) – Artyer

Истина. И если мы идем по этой дороге, мы должны использовать' event. которые объявление 'keyCode'. Но проблема в том, что это просто недостающая фигурная скобка. –

@ScottMarcus Проблема заключается в том, что ваш фрагмент не работает с «ReferenceError» при нажатии клавиши. ** Редактировать: nevermind ** – RyanZim

-1

window.addEventListener("DOMContentLoaded", function(){ 

     var btn = document.getElementById("btn"); 
     var txt = document.getElementById("txtInput"); 

     btn.addEventListener("click", test); 
     txt.addEventListener("keydown", key); 

function key(evt){ 

     evt = evt || window.event; 

     if (evt.which === 13){ 
     document.getElementById('btn').click(); 
     } 
    } 
}); 

<input type="text" id="txtInput" placeholder="Write your word"> 
<button id="btn">test</button>

Ваш код не работает, потому что ваш отсутствует кронштейн после если statement.Also я надеюсь, что мой код поможет вам.

источник

2016-11-21 21:25:59

Хотя это может сработать, он использует JQuery, о котором OP не спрашивал. Он также не информирует ОП о том, почему его код не работает. –

Триггер кнопки, когда пользователь нажимает кнопку «Ввод»

ответ

Смежные вопросы