Как предотвратить нажатие клавиши ВВОД при отправке веб-формы?
Как вы предотвращаете отправку формы нажатием клавиши ВВОД в веб-приложении?
30 ответов
[редакция 2012, встроенный обработчик отсутствует, сохраните текстовую область, введите обработку]
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;
}
Теперь вы можете определить обработчик нажатия клавиш в форме:
document.querySelector('form').onkeypress = checkEnter;
Вот обработчик 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;
});
});
Просто верните false из обработчика onsubmit
<form onsubmit="return false;">
или если вы хотите обработчик в середине
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
Вам нужно будет вызвать эту функцию, которая просто отменит поведение отправки формы по умолчанию. Вы можете прикрепить его к любому полю ввода или событию.
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();
}
}
Вкратце ответ на чистом 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" и для других действий, вы можете добавить console.log(e); для ваших целей тестирования и нажмите F12 в Chrome, перейдите на вкладку "консоль" и нажмите "Backspace" на странице и загляните внутрь нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности для "e.target.nodeName", "e.target.type" и многих других...
Клавиша ENTER просто активирует кнопку отправки формы по умолчанию, которая будет первой
<input type="submit" />
браузер находит в форме.
Поэтому нет кнопки отправки, но что-то вроде
<input type="button" value="Submit" onclick="submitform()" />
РЕДАКТИРОВАТЬ: В ответ на обсуждение в комментариях:
Это не сработает, если у вас есть только одно текстовое поле - но, возможно, это и есть желаемое поведение в этом случае.
Другая проблема заключается в том, что это полагается на Javascript для отправки формы. Это может быть проблемой с точки зрения доступности. Это можно решить, написав <input type='button'/> с JavaScript, а затем положить <input type='submit' /> в пределах <noscript> тег. Недостаток этого подхода заключается в том, что для браузеров с отключенной поддержкой javascript вы должны будете отправлять формы на ENTER. Это зависит от ФП, чтобы решить, каково поведение в этом случае.
Я не знаю никакого способа сделать это, не вызывая JavaScript вообще.
Я всегда делал это с помощью обработчика нажатий клавиш, как в прошлом, но сегодня нашел более простое решение. Клавиша ввода просто запускает первую не отключенную кнопку отправки в форме, поэтому на самом деле все, что требуется, это перехватить эту кнопку при попытке отправки:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
Вот и все. Клавиши будут обрабатываться как обычно браузером / полями / и т. Д. Если сработала логика ввода-отправки, то браузер найдет эту скрытую кнопку отправки и активирует ее. И тогда обработчик javascript предотвратит передачу.
У всех ответов, которые я нашел по этой теме, здесь или в других сообщениях, есть один недостаток, то есть он предотвращает фактический триггер изменения также и на элементе формы. Поэтому, если вы запускаете эти решения, событие onchange также не запускается. Чтобы преодолеть эту проблему, я изменил эти коды и разработал следующий код для себя. Я надеюсь, что это станет полезным для других. Я дал класс для моей формы "protect_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");
}
});
});
Я потратил некоторое время на создание этого кросс-браузера для 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;
}
}
}
}
Запрет "ВВОД" для отправки формы может причинить неудобства некоторым вашим пользователям. Так что было бы лучше, если вы будете следовать процедуре ниже:
Напишите событие 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;
}
});
});
Благодарю.
Чтобы предотвратить отправку формы при нажатии введите в 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();
}
});
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.
Добавьте этот тег в вашу форму - onsubmit="return false;"Тогда вы можете отправить свою форму только с некоторой функцией JavaScript.
Вы найдете это более простым и полезным: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;
}
});
В моем случае этот jQuery JavaScript решил проблему
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
Пожалуйста, проверьте эту статью Как предотвратить нажатие клавиши ВВОД при отправке веб-формы?
$(“.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>Как насчет:
<asp:Button ID="button" UseSubmitBehavior="false"/>
Эта ссылка предоставляет решение, которое работает для меня в Chrome, FF и IE9, а также эмулятор для IE7 и 8, который поставляется с инструментом разработчика IE9 (F12).
Другой подход заключается в добавлении кнопки ввода в форму только в том случае, если она должна быть отправлена, и замене ее простым делителем во время заполнения формы.
Как насчет:
<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 в одном, не будут иметь правильного имени.
Вот как бы я это сделал:
window.addEventListener('keydown', function(event)
{
if (event.key === "Enter")
{
if(event.target.type !== 'submit')
{
event.preventDefault();
return false;
}
}
}
Я думаю, вы можете поймать ключ в форму в javascript и предотвратить даже пузыриться. ENTER на веб-странице в основном просто отправляет форму, в которой находится выбранный элемент управления.
Просто добавьте этот атрибут в ваш тег 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
}
Я сталкивался с этим сам, потому что у меня есть несколько кнопок отправки с разными значениями 'name', так что при отправке они делают разные вещи в одном и том же php-файле. enter / return кнопка ломает это, поскольку эти значения не представлены. Так что я думал, enter / return кнопка активировать первую кнопку отправки в форме? Таким образом, вы можете использовать кнопку "vanilla" submit, которая либо скрыта, либо имеет значение "name", которое возвращает исполняемый файл php обратно на страницу с формой в нем. Или же значение по умолчанию (скрытое) "name", которое активируется нажатием клавиши, и кнопки отправки перезаписывают свои собственные значения "name". Просто мысль.
Если ни один из этих ответов вам не подходит, попробуйте это. Добавьте кнопку отправки перед той, которая фактически отправляет форму, и ничего не делайте с событием.
HTML
<!-- The following button is meant to do nothing. This button will catch the "enter" key press and stop it's propagation. -->
<button type="submit" id="EnterKeyIntercepter" style="cursor: auto; outline: transparent;"></button>
JavaScript
$('#EnterKeyIntercepter').click((event) => {
event.preventDefault(); //The buck stops here.
/*If you don't know what this if statement does, just delete it.*/
if (process.env.NODE_ENV !== 'production') {
console.log("The enter key was pressed and captured by the mighty Enter Key Inceptor (⌐■_■)");
}
});
Это сработало для меня.
onkeydown = "return! (event.keyCode == 13)"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
<input onkeydown="onInputKeyDown(event)" />
или в Angular
<input (keydown)="onInputKeyDown($event)" />
/**
* Closes the on-screen keyboard on "enter".
* Cursor leaves the input element.
*/
onInputKeyDown(e: KeyboardEvent|any) {
if (e.key === 'Enter') {
// Leave the input element
e.target.blur();
// Prevent to submit form (it was default action on Enter)
e.preventDefault();
}
}
Положить в Javascript внешний файл
(function ($) {
$(window).keydown(function (event) {
if (event.keyCode == 13) {
return false;
}
});
})(jQuery);
или где-то внутри тега body
<script>
$(document).ready(function() {
$(window).keydown(function(event) {
alert(1);
if(event.keyCode == 13) {
return false;
}
});
});
</script>
У меня была такая же проблема (формы с тоннами текстовых полей и неквалифицированных пользователей).
Я решил это следующим образом:
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 нажмите, как правило) требуется.
Я оставляю читателям поиски скрипта, отправляющего пользователя в поле, где он нажал ENTER если он решит остаться в форме.