Відповіді:
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видалення означало б масштабну зміну непереліченої кількості застарілих веб-сайтів. З цієї причини навряд чи вони збираються куди-небудь найближчим часом.
evalвміст, натискаючи кнопку, не відрізняється від того, якби вони відкрили інструменти для розробників і зробили це. Якби це було щось, що було збережено в БД і яке могло б відкрити інший користувач, то це було б великою справою, але це проблема, яка повністю не залежить від цього маленького фрагмента.
Використовуйте і те, event.whichі event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichінших keyCode. Добра практика включати обидва.
keydownподію замість keyupабоkeypress
Якщо ви використовуєте jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefault, схоже, не зупиняє подання форми, принаймні, у Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'правильно, як заявляють інші коментатори. Оскільки його не змінили, я оновлю відповідь. Я використав цю відповідь і затримався на деякий час, поки не повернувся і подивився на коментарі.
Більш свіжі та набагато чистіші: використання event.key. Більше немає довільних кодів номерів!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});keyCodeзастаріло. Це читабельніше та
Виявити клавішу Enter, натиснуту на весь документ:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Замініть onsubmitдію форми для виклику вашої функції та додайте після неї false 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>Тестується у всіх браузерах.
Рішення 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
}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"><form id="form1" runat="server" onkeypress="return event.keyCode != 13;">Додайте цей код на свою сторінку HTML ... він відключить ... Кнопку введіть ..
<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>Деякі старі браузери нестандартно реалізовували події клавіатури.
KeyBoardEvent.key - це спосіб, який він повинен бути реалізований у сучасних браузерах.
which
і keyCodeвони застарілі в наш час, але перевірити ці події не завадить, щоб код працював для користувачів, які все ще використовують старі браузери, такі як IE.
У isKeyPressedфункції перевірки , якщо натиснута кнопка була увійти і event.preventDefault()заважає форма від уявлення.
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}JS
function isKeyPressed(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 (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
});HTML
<form>
<input id="myInput">
</form>