Запуск функции JavaScript, привязанный к кнопке HTML, нажатием Enter. (Без использования клавиши Tab)

Мое намерение - создать кнопку, которая может вызвать функцию JavaScript (предупреждение «Button works!»), Привязанное к ней, нажав клавишу Enter. Но он работает только после нажатия клавиши Tab, чтобы выделить кнопку. Я безуспешно пытался использовать JavaScript и JQuery. Как я могу заставить его работать, не возившись с клавишей Tab? Вот код:Запуск функции JavaScript, привязанный к кнопке HTML, нажатием Enter. (Без использования клавиши Tab)

<html> 
    <head> 
    <title>Enter Press Test</title> 
    </head> 
    <body> 

    <p style="text-align: center;" > 

    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)"> 
    Start Test 
    </button> 
    </p> 

    <!--<script type="text/javascript"> 
     function handle(e) {   // JavaScript solution 
      if (e.keyCode === 13) { 
       alert("Button works!"); 
      } 
     } 
    </script>--> 

    <script type="text/javascript"> 
     $("#button1").keyup(function(event) {  // JQuery solution 
      if (event.keyCode == 13) { 
       $("#button1").click(); 
      } 
     }); 
    </script> 

    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script> 

    </body> 
</html>

источник

2016-11-04 Alex F

Слушайте на клавишу ввода, и запустите функцию в своем обратном вызове. – Carcigenicate

вместо '$ (" # button1 "). Keyup (' try '$ (document) .keyup (' так что событие будет прослушиваться по всему документу – vijayP

После инициализации JQuery после его использования. jquery перед использованием jquery. – Samir

Добавить прослушиватель событий в document элемента вместо #button1:

$(document).keyup(function(event) { 
 
    if (event.keyCode == 13) { 
 
    $("#button1").click(); 
 
    } 
 
}); 
 

 
$('#button1').click(function(){ 
 
    alert('Button works!'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <title>Enter Press Test</title> 
 
</head> 
 

 
<body> 
 

 
    <p style="text-align: center;"> 
 

 
    <button id="button1"> 
 
     Start Test 
 
    </button> 
 
    </p> 
 

 
</body> 
 

 
</html>

источник

2016-11-04 11:56:42 Sgnl

Спасибо! Идея работает! –

Если вы хотите, чтобы кнопка не была подсвечена, просто нажмите клавишу Enter без какого-либо подключения к кнопке.

Решение не должно даже знать, что кнопка существует.

так что вы могли бы сделать что-то вроде:

$(document).keypress(function(e) { 
    if (e.which == "13") { 
     alert("this is enter key, but im not aware to the button"); 
    }  
});

источник

2016-11-04 11:55:57 jony89

Спасибо! Он работает сейчас! –

Вы должны прикрепить обработчик события document, чтобы любой элемент мог принять событие keypress и пусть это пузырится вверх по DOM и быть пойманным в самой высокой точке. Также обратите внимание, что вы должны использовать ненавязчивые обработчики событий из-за устаревших атрибутов событий on*. Попробуйте это:

$(document).keypress(function(e) { 
 
    if (e.keyCode == 13) { 
 
    $("#button1").click(); 
 
    } 
 
}); 
 

 
$('#button1').click(function() { 
 
    alert('Button works!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p style="text-align: center;"> 
 
    <button id="button1"> 
 
    Start Test 
 
    </button> 
 
</p>

источник

2016-11-04 11:58:04

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    <title>Enter Press Test</title> 
 
    </head> 
 
    <body> 
 

 
    <p style="text-align: center;" > 
 

 
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)"> 
 
    Start Test 
 
    </button> 
 
    </p> 
 

 
    <!--<script type="text/javascript"> 
 
     function handle(e) {   // JavaScript solution 
 
      if (e.keyCode === 13) { 
 
       alert("Button works!"); 
 
      } 
 
     } 
 
    </script>--> 
 

 
    <script type="text/javascript"> 
 
     $(window).keyup(function(event) {  // JQuery solution 
 
      if (event.keyCode == 13) { 
 
       $("#button1").click(); 
 
      } 
 
     }); 
 
    </script> 
 

 
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script> 
 

 
    </body> 
 
</html>

источник

2016-11-04 11:59:42

Вы можете использовать что-то вроде этого. Свяжите события в методе .on(). Не нужно писать для этого разные события. И, как я упоминаю, включите JQuery, прежде чем использовать его.

<html> 
    <head> 
    <title>Enter Press Test</title> 
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script> 
    </head> 
    <body> 

    <p style="text-align: center;" > 
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)"> 
    Start Test 
    </button> 
    </p> 

    <!--<script type="text/javascript"> 
     function handle(e) {   // JavaScript solution 
      if (e.keyCode === 13) { 
       alert("Button works!"); 
      } 
     } 
    </script>--> 

    <script type="text/javascript"> 
     $(document).on('keyup mouseup', '#button1', function(event) {  // JQuery solution 
      $("#button1").click(); //fire the event, on mouse click 
      if (event.keyCode == 13) { //fire the event on enter key press 
       $("#button1").click(); 
      } 
     }); 
    </script> 
    </body> 
</html>

источник

2016-11-04 12:00:41 Samir

если вы хотите ввести/вызов функции без обходе на кнопку, с помощью только на счет ввода, пожалуйста, связать функцию с событием документа при нажатии на кнопку:

$(document).keypress(function(e){ 
      if(e.which == 13){//Enter key pressed 
       $("#button1").click(); 
      } 
     });

источник

2016-11-04 12:00:54 Conqueror

<html> 
    <head> 
    <title>Enter Press Test</title> 
    </head> 
    <body> 
    <p style="text-align: center;" > 
    <button id="button1" onclick="alert('Button works!');"onkeypress="handle(event)"> 
     Start Test 
    </button> 
    </p> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $("#button1").focus(); 
       $("#button1").keyup(function(event) {  // JQuery solution 
        if (event.keyCode == 13) { 
         $("#button1").click(); 
        } 
       }); 

    </script> 
    </body> 
    </html>

источник

2016-11-04 12:17:56 vasanth

Вы можете просто сфокусировать кнопку при загрузке страницы. – vasanth

Запуск функции JavaScript, привязанный к кнопке HTML, нажатием Enter. (Без использования клавиши Tab)

ответ

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