Отключение клавиши ввода для формы
Я пытался отключить клавишу Enter в моей форме. Код, который я имею, показан ниже. По какой-то причине клавиша ввода все еще вызывает отправку. Код находится в моем разделе заголовка и кажется правильным из других источников.
disableEnterKey: function disableEnterKey(e){
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
},
16 ответов
Если вы используете JQuery, это довольно просто. Ну вот
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
Большинство ответов в JQuery. Вы можете сделать это идеально в чистом Javascript, простом и не требующем библиотеки. Вот:
<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>
Этот код прекрасно работает, потому что он отключает только нажатие клавиши "Ввод" для ввода type='text'. Это означает, что посетители по-прежнему могут использовать клавишу "Ввод" в текстовой области и по всей веб-странице. Они по-прежнему смогут отправить форму, перейдя к кнопке "Отправить" с помощью клавиш "Tab" и нажав "Ввод".
Вот некоторые основные моменты:
- Это в чистом JavaScript (библиотека не требуется).
- Мало того, что он проверяет нажатую клавишу, он также подтверждает, что нажата кнопка "Ввод" в элементе ввода input type='text'. (Что вызывает наиболее ошибочную форму подчиняется
- Вместе с вышеизложенным, пользователь может использовать клавишу "Ввод" в любом другом месте.
- Это коротко, чисто, быстро и прямо к делу.
Если вы хотите отключить "Enter" и для других действий, вы можете добавить console.log(e); для ваших целей тестирования и нажмите F12 в Chrome, перейдите на вкладку "консоль" и нажмите "Backspace" на странице и загляните внутрь нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности для "e.target.nodeName", "e.target.type" и многих других...
В теге формы просто вставьте это:
onkeypress="return event.keyCode != 13;"
Попробуйте это ^^
$(document).ready(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
});
Надеюсь это поможет
Для решения, не являющегося JavaScript, попробуйте положить <button disabled>Submit</button> в форму, расположенную перед любыми другими кнопками ввода / ввода. Я предлагаю сразу после <form> открывающий тег (и использующий CSS, чтобы скрыть его, accesskey='-1', чтобы вывести его из последовательности вкладок и т. д.)
AFAICT, пользовательские агенты ищут первую кнопку отправки, когда на входе нажимается ENTER, и если эта кнопка отключена, то перестанет искать другую.
Кнопка по умолчанию для элемента формы - это первая кнопка отправки в древовидном порядке, владельцем формы которой является этот элемент формы.
Если пользовательский агент поддерживает разрешение пользователю неявно отправлять форму (например, на некоторых платформах нажатие клавиши "ввод", когда текстовое поле неявно фокусируется, отправляет форму), то это делается для формы, кнопка по умолчанию которой имеет определенную активацию. из-за этого поведения пользовательский агент должен выполнить шаги активации искусственного щелчка для этой кнопки по умолчанию.
Следовательно, если кнопка по умолчанию отключена, форма не отправляется, когда используется такой механизм неявной отправки. (Кнопка не имеет поведения активации при отключении.)
Однако я знаю, что Safari 10 MacOS ведет себя неправильно, отправляя форму, даже если кнопка по умолчанию отключена.
Итак, если вы можете принять JavaScript, вставьте <buttononclick="return false;">Submit</button> вместо. При вводе будет вызван обработчик onclick, и, поскольку он возвращает false, процесс отправки останавливается. Браузеры, с которыми я это тестировал, даже не проверяют браузер (фокусируют внимание на первом недействительном элементе управления формы, отображают сообщение об ошибке и т. Д.).
Решение очень простое:
Заменить тип "Отправить" кнопкой
<input type="button" value="Submit" onclick="this.form.submit()" />
Это в чистом javascript
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});Вот простой способ сделать это с помощью jQuery, который ограничивает его соответствующими элементами ввода:
//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
if (e.which == 13) e.preventDefault();
});
Благодаря этому ответу: /questions/43453627/zapretit-polzovatelyam-otpravlyat-formu-nazhav-enter/43453656#43453656.
Просто добавьте следующий код в <Head> Отметьте в своем HTML-коде. Это будет заполнение формы при вводе ключа. Для всех полей формы.
<script type="text/javascript">
function stopEnterKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
}
document.onkeypress = stopEnterKey;
</script>
Вы можете попробовать что-то вроде этого, если вы используете jQuery.
$("form").bind("keydown", function(e) {
if (e.keyCode === 13) return false;
});
Это будет ждать нажатия клавиш, если это Enter, это ничего не сделает.
Я проверил все вышеперечисленные решения, они не работают. Единственное возможное решение - перехватывать событие "onkeydown" для каждого ввода формы. Вам нужно прикрепить disableAllInputs для загрузки страницы или с помощью jquery ready()
/*
* Prevents default behavior of pushing enter button. This method doesn't work,
* if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
* the input. So method should be attached directly to the input 'onkeydown'
*/
function preventEnterKey(e) {
// W3C (Chrome|FF) || IE
e = e || window.event;
var keycode = e.which || e.keyCode;
if (keycode == 13) { // Key code of enter button
// Cancel default action
if (e.preventDefault) { // W3C
e.preventDefault();
} else { // IE
e.returnValue = false;
}
// Cancel visible action
if (e.stopPropagation) { // W3C
e.stopPropagation();
} else { // IE
e.cancelBubble = true;
}
// We don't need anything else
return false;
}
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
try {
var els = document.getElementsByTagName('input');
if (els) {
for ( var i = 0; i < els.length; i++) {
els[i].onkeydown = preventEnterKey;
}
}
} catch (e) {
}
}
Я думаю, что гораздо лучше установить класс в форме. поэтому я закодировал это:
HTML
<form class="submit-disabled">
JS
/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('submit', function (e) {
e.preventDefault()
});
/**
* </End>
* Submit Disabled Form
*/
А также, если вы хотите отключить отправку только тогда, когда
Enter Key Нажмите:
/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault()
}
});
/**
* </End>
* Submit Disabled Form
*/
Вот современное, простое и реактивное решение, которое работает в:
- React, Solidjs, JSX и т. д.
- написано на машинописном языке
- поддерживает рендеринг на стороне сервера (SSR)
- все современные браузеры
- НЕ требует JQuery
- блокирует ВСЕ ключи за пределами
<textarea>где вы хотите разрешитьEnter
// avoids accidential form submission, add via event listener
function blockEnterKey(e: KeyboardEvent) {
if (e.key == "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
e.preventDefault()
}
}
// add the event listener before the rendering return in React, etc.
if (typeof window !== undefined) {
window.addEventListener("keydown", blockEnterKey)
// the following line is for Solidjs. React has similar cleanup functionality
// onCleanup(() => document.body.removeEventListener("keydown", blockEnterKey))
}
return(
<form>
...
</form>
)
Сначала вам нужно отключить форму при отправке, но снова включить ее при нажатии на кнопку. который или keycode в данном случае не используется, что позволяет избежать некоторых проблем с совместимостью.
let formExample = document.getElementbyId("formExample");//selects the form
formExample.addEventListener("submit", function(event){ //must be used "submit"
event.preventDefault();// prevents "form" from being sent
})
Чтобы повторно активировать и отправить форму, нажав кнопку:
let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateButton); //calls the function "activateButton()" on click
function activateButton(){
formExample.submit(); //submits the form
}
вариация этого была бы
let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateBtnConditions); //calls the function "activateBtnConditions()" on click
function activateBtnConditions(){
if(condition){
instruction
}
else{
formExample.submit()
}
}
в HTML-файле:
@keypress="disableEnterKey($event)"
в js-файле:
disableEnterKey(e) {
if (e.keyCode === 13) {
e.preventDefault();
}
}
Лучший способ, который я нашел здесь:
Dream.In.Code
action="javascript: void(0)" или же action="return false;" (не работает на меня)