Введите событие нажатия клавиши в JavaScript
У меня есть form с двумя текстовыми полями, одним выпадающим списком и одним переключателем. Когда клавиша ввода нажата, я хочу вызвать функцию javascript (определенную пользователем), но когда я нажимаю ее, форма отправляется.
Как мне предотвратить form быть отправленным при нажатии клавиши ввода?
20 ответов
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Итак, представьте, что у вас есть следующее текстовое поле в форме:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
Чтобы запустить некоторый "определенный пользователем" сценарий из этого текстового поля при нажатии клавиши ввода, и не иметь возможности отправить форму, вот пример кода. Обратите внимание, что эта функция не выполняет проверку ошибок и, скорее всего, будет работать только в IE. Чтобы сделать это правильно, вам нужно более надежное решение, но вы получите общее представление.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
Возврат значения функции предупредит обработчик события, чтобы он больше не генерировал событие, и предотвратит дальнейшую обработку события нажатия клавиши.
НОТА:
Было отмечено, что keyCode сейчас устарела. Следующая лучшая альтернатива which также устарела.
К сожалению, удачный стандарт key, который широко поддерживается современными браузерами, имеет немного хитрое поведение в IE и Edge. Все, что старше IE11, все равно нуждается в полифилле.
Кроме того, хотя устарелое предупреждение весьма зловеще keyCode а также whichих удаление может привести к серьезным изменениям в неисчислимом количестве устаревших веб-сайтов. По этой причине маловероятно, что они собираются куда-нибудь в ближайшее время.
Используйте оба event.which а также event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
event.key === "Enter"
Более новый и намного чище: используйте event.key, Нет больше произвольных числовых кодов!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
Если вы используете jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
Обнаружить клавишу Enter, нажатую на весь документ:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
Переопределить onsubmit действие формы для вызова вашей функции и добавления возврата false после нее, то есть:
<form onsubmit="javascript:myfunc();return false;" >
Реагировать JS решение
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
Так что, возможно, лучшим решением, которое охватит как можно больше браузеров и будет перспективным, было бы
if (event.which == 13 || event.keyCode == 13 || event.key === "Enter")
Если вы хотите сделать это с помощью чисто Java-сценария, вот пример, который отлично работает
Допустим, это ваш HTML-файл
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>
в вашем файле popup.js просто используйте эту функцию
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});
Ниже код добавит слушателя для ENTER ключ на всю страницу.
Это может быть очень полезно на экранах с одной кнопкой "Действие", например, "Войти", "Зарегистрироваться", "Отправить" и т. Д.
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>
Проверено на всех браузерах.
Немного просто
Не отправляйте форму по нажатию клавиши "Enter":
<form id="form_cdb" onsubmit="return false">
Выполните функцию по нажатию клавиши "Ввод":
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
Гораздо проще и эффективнее, с моей точки зрения, быть:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
Решение JQuery.
Я пришел сюда в поисках способа отложить отправку формы до тех пор, пока не сработает событие размытия при вводе текста.
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});
Было бы неплохо получить более общую версию, которая запускает все отложенные события, а не только форму отправки.
Использование TypeScript, и избежать многократных вызовов функции
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
Добавьте этот код на свою HTML-страницу... он отключит... кнопку ввода..
родной JS (выбор API)
document.onload = (() => {
alert('ok');
let keyListener = document.querySelector('#searchUser');
//
keyListener.addEventListener('keypress', (e) => {
if(e.keyCode === 13){
let username = e.target.value;
console.log(`username = ${username}`);
fetch(`https://api.github.com/users/${username}`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((user)=>{
console.log(`user = ${user}`);
});
fetch(`https://api.github.com/users/${username}/repos`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((repos)=>{
console.log(`repos = ${repos}`);
for (let i = 0; i < repos.length; i++) {
console.log(`repos ${i} = ${repos[i]}`);
}
});
}else{
console.log(`e.keyCode = ${e.keyCode}`);
}
});
})();<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text"><div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>
Эта функция preventKey() работает независимо от устаревших функций браузера.
Только одно из трех свойств which (Устаревшее), keyCode (устарело) или key (проблемы в IE) должен присутствовать.
https://jsfiddle.net/tobiobeck/z13dh5r2/
JS
function preventKey(event, expectedKey, expectedCode) {
const code = event.which || event.keyCode;
if (expectedKey === event.key || code === expectedCode) {
return true;
}
return false;
}
document.getElementById('myInput').addEventListener('keydown', function(event) {
if (preventKey(event, 'Enter', 13)) {
event.preventDefault();
}
});
HTML
<form>
<input id="myInput">
</form>
Тестирование браузера
Если вы хотите протестировать разные браузеры, прокомментируйте или удалите комментарий одного из трех следующих event.something линии:
var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'
if (preventKey(event, 'Enter', 13)) {
console.log('enter was pressed');
}
Использовать event.preventDefault() внутри пользовательской функции
<form onsubmit="userFunction(event)"> ...
function userFunction(ev)
{
if(!event.target.send.checked)
{
console.log('form NOT submit on "Enter" key')
ev.preventDefault();
}
}Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
<input placeholder="type and press Enter" /><br>
<input type="checkbox" name="send" /> submit on enter
</form>Я использовал документ, который охватывает динамически добавляемый html после загрузки страницы:
$(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});
Добавлены обновления от @Bradley4