Как предотвратить нажатие клавиши ENTER на отправку формы в веб-приложении?
Как предотвратить нажатие клавиши ENTER, чтобы отправить веб-форму?
Ответ 1
[ ревизия 2012, нет встроенного обработчика, сохранить textarea введите обработку]
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
Теперь вы можете определить обработчик нажатия клавиши в форме: < form [...] onkeypress = "return checkEnter (event)" >
document.querySelector('form').onkeypress = checkEnter;
Ответ 2
Вот обработчик jQuery, который может использоваться, чтобы остановить ввод, и также остановить обратный ключ → назад. Пара (keyCode: selectorString) в объекте "keyStop" используется для сопоставления узлов, которые не должны запускать действие по умолчанию.
Помните, что Интернет должен быть доступным местом, и это нарушает ожидания пользователей. Тем не менее, в моем случае веб-приложение, над которым я работаю, в любом случае не любит кнопку "Назад", поэтому отключить его ключевой ярлык в порядке. "Необходимо войти → отправить" обсуждение важно, но не связано с реальным вопросом.
Вот код, до вас, чтобы думать о доступности и почему вы на самом деле хотите это сделать!
$(function(){
var keyStop = {
8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
13: "input:text, input:password", // stop enter = submit
end: null
};
$(document).bind("keydown", function(event){
var selector = keyStop[event.which];
if(selector !== undefined && $(event.target).is(selector)) {
event.preventDefault(); //stop event
}
return true;
});
});
Ответ 3
Просто верните false из обработчика onsubmit
<form onsubmit="return false;">
или если вы хотите, чтобы обработчик посередине
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
Ответ 4
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
Ответ 5
Вам нужно будет вызвать эту функцию, которая просто отменяет поведение отправки по умолчанию в форме по умолчанию. Вы можете прикрепить его к любому полю ввода или событию.
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
Ответ 6
Клавиша ENTER просто активирует кнопку отправки по умолчанию формы, которая будет первой
<input type="submit" />
браузер находит в форме.
Поэтому у вас нет кнопки отправки, но что-то вроде
<input type="button" value="Submit" onclick="submitform()" />
EDIT. В ответ на обсуждение в комментариях:
Это не работает, если у вас есть только одно текстовое поле, но в этом случае это может быть желаемое поведение.
Другая проблема заключается в том, что это зависит от Javascript для отправки формы. Это может быть проблемой с точки зрения доступности. Это можно решить, написав <input type='button'/> с javascript, а затем поместите <input type='submit' /> в тег <noscript>. Недостатком этого подхода является то, что для браузеров с отключенным javascript вы будете иметь сообщения о форме на ENTER. Это зависит от OP, чтобы решить, в чем состоит желаемое поведение.
Я не знаю, как это сделать, не вызывая javascript вообще.
Ответ 7
В коротком ответе в чистом 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>
Это только отключает действие нажатия "Enter" для типа ввода = 'text'. Посетители могут по-прежнему использовать ключ "Enter" по всему веб-сайту.
Если вы хотите отключить "Enter" для других действий, вы можете добавить console.log(e); для ваших целей тестирования и нажмите F12 в хроме, перейдите на вкладку "console" и нажмите "backspace" на странице и загляните внутрь, чтобы увидеть, какие значения будут возвращены, затем вы можете настроить таргетинг на все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности в "e.target.nodeName" , "e.target.type" и многом другом...
Ответ 8
Все ответы, которые я нашел по этому вопросу, здесь или в других сообщениях имеют один недостаток, и это также предотвращает запуск фактического изменения в элементе формы. Поэтому, если вы запускаете эти решения, событие onchange также не запускается. Чтобы преодолеть эту проблему, я изменил эти коды и разработал для себя следующий код. Надеюсь, это станет полезным для других. Я дал класс для своей формы "prevent_auto_submit" и добавил следующий JavaScript:
$(document).ready(function()
{
$('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event)
{
if (event.keyCode == 13)
{
event.preventDefault();
$(this).trigger("change");
}
});
});
Ответ 9
Я потратил некоторое время на создание этого кросс-браузера для IE8,9,10, Opera 9+, Firefox 23, Safari (ПК) и Safari (MAC)
Пример JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/
Базовый код. Вызовите эту функцию через "onkeypress", прикрепленную к вашей форме, и передайте в нее "window.event".
function stopEnterSubmitting(e) {
if (e.keyCode == 13) {
var src = e.srcElement || e.target;
if (src.tagName.toLowerCase() != "textarea") {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}
Ответ 10
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
Затем на вашей форме:
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
Хотя, было бы лучше, если бы вы не использовали навязчивый JavaScript.
Ответ 11
Я всегда делал это с помощью обработчика нажатия клавиш, как это было в прошлом, но сегодня ударил по более простому решению. Клавиша ввода просто запускает первую кнопку отказа от отказа в форме, поэтому на самом деле все, что требуется, - это перехватить эту кнопку, пытающуюся отправить:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
Что это. Ключи будут обрабатываться, как обычно, браузером/полями и т.д. Если запускается логика ввода-отправки, браузер обнаружит эту скрытую кнопку отправки и запускает ее. И обработчик javascript затем предотвратит его.
Ответ 12
В моем случае этот jQuery JavaScript решил проблему
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
Ответ 13
Предотвращение "ENTER" для отправки формы может привести к неудобствам некоторых ваших пользователей. Поэтому было бы лучше, если вы выполните следующую процедуру:
Напишите событие onSubmit в теге формы:
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
напишите функцию Javascript следующим образом:
function testSubmit(){
if(jQuery("#formId").valid())
{
return true;
}
return false;
}
(OR)
Как бы то ни было, если вы хотите предотвратить отправку формы при нажатии клавиши Enter, вы можете записать следующую функцию в javascript:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
спасибо.
Ответ 14
Добавьте этот тег в свою форму - onsubmit="return false;"
Затем вы можете отправить свою форму только с помощью некоторой функции JavaScript.
Ответ 15
Чтобы предотвратить отправку формы при нажатии enter в поле textarea или input, проверьте событие отправки, чтобы узнать, какой тип элемента отправил событие.
Пример 1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
JQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
Лучшее решение - если у вас нет кнопки отправки, и вы запускаете событие с помощью обычной кнопки. Это лучше, потому что в первом примере 2 отправляются события, но во втором примере запускается только 1 событие отправки.
Пример 2
HTML
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
JQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
Ответ 16
Вы найдете это более простым и полезным: D
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
Ответ 17
Как насчет:
<asp:Button ID="button" UseSubmitBehavior="false"/>
Ответ 18
Пожалуйста, проверьте эту статью Как предотвратить нажатие клавиши ENTER для отправки веб-формы?
$(".pc_prevent_submit").ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="pc_prevent_submit" action="" method="post">
<input type="text" name="username">
<input type="password" name="userpassword">
<input type="submit" value="submit">
</form>Ответ 19
Вы можете заблокировать keydown на форме в javascript и предотвратить даже пузыри, я думаю. ENTER на веб-странице в основном просто представляет форму, в которую помещается текущий выбранный элемент управления.
Ответ 20
Эта ссылка предоставляет решение, которое работало для меня в Chrome, FF и IE9, а также эмулятор для IE7 и 8, который поставляется с инструментом разработчика IE9 (F12).
Ответ 21
Другой подход заключается в том, чтобы добавить кнопку ввода отправки в форму только тогда, когда она должна быть отправлена и заменить ее простым div во время заполнения формы
Ответ 22
Просто добавьте этот атрибут в свой тег FORM:
onsubmit="return gbCanSubmit;"
Затем в тэге SCRIPT добавьте следующее:
var gbCanSubmit = false;
Затем, когда вы делаете кнопку или по какой-либо другой причине (например, в функции), вы, наконец, разрешаете отправку, просто переворачиваете глобальное логическое значение и выполняете вызов .submit(), аналогичный этому примеру:
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$('#myform').submit(); // jQuery example
}
Ответ 23
Я столкнулся с этим сам, потому что у меня есть несколько кнопок отправки с разными значениями "имя", поэтому при отправке они делают разные вещи в одном файле php. Кнопка enter/return прерывает это, поскольку эти значения не отправляются.
Поэтому я подумал: кнопка enter/return активирует первую кнопку отправки в форме?
Таким образом, у вас может быть кнопка отправки 'vanilla', которая либо скрыта, либо имеет значение "имя", которое возвращает исполняемый файл php обратно на страницу с формой в нем.
Или же значение по умолчанию (скрытое) "имя", которое активируется нажатием клавиши, и кнопки отправки переписываются со своими значениями "имя".
Просто мысль.
Ответ 24
Как насчет:
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
И просто назовите свою кнопку справа, и она все равно будет отправлена, но текстовые поля, т.е. явное значениеOriginalTarget, когда вы нажмете return в одном, не будут иметь правильное имя.
Ответ 25
Это сработало для меня.
onkeydown = "return! (event.keyCode == 13)"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
Ответ 26
помещается в внешний файл javascript
(function ($) {
$(window).keydown(function (event) {
if (event.keyCode == 13) {
return false;
}
});
})(jQuery);
или где-либо внутри тега тела
<script>
$(document).ready(function() {
$(window).keydown(function(event) {
alert(1);
if(event.keyCode == 13) {
return false;
}
});
});
</script>
Ответ 27
У меня была та же проблема (формы с тонны текстовых полей и неквалифицированных пользователей).
Я решил это следующим образом:
function chkSubmit() {
if (window.confirm('Do you want to store the data?')) {
return true;
} else {
// some code to focus on a specific field
return false;
}
}
используя это в HTML-коде:
<form
action="go.php"
method="post"
accept-charset="utf-8"
enctype="multipart/form-data"
onsubmit="return chkSubmit()"
>
Таким образом, клавиша ENTER работает так, как планировалось, но требуется подтверждение (обычно второй) ENTER.
Я оставляю читателям поиск script отправки пользователя в поле, где он нажал ENTER, если он решил остаться в форме.