Вы можете использовать такой метод, как
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
, при чтении комментариев к исходному сообщению, чтобы сделать его более удобным и позволить людям нажать Введите , если они завершили все поля:
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
Войдите в свою CSS и добавьте, что к нему затем автоматически заблокирует представление Вашего формуляра, пока Вы имеете, отправляют вход, если Вы больше не хотите это, можно удалить его или тип activate
и deactivate
вместо этого
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
Можно также использовать javascript:void(0)
для предотвращения представления формы.
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
Вы можете создать метод JavaScript, чтобы проверить, была ли нажата клавиша Enter , и если да, то остановить отправку.
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
Просто вызовите это при метод отправки.
Вместо того, чтобы запрещать пользователям нажимать Enter , что может показаться неестественным, вы можете оставить форму как есть и добавить дополнительную проверку на стороне клиента: когда опрос не проводится завершено, результат не отправляется на сервер, и пользователь получает приятное сообщение о том, что нужно завершить, чтобы заполнить форму. Если вы используете jQuery, попробуйте подключаемый модуль Validation:
http://docs.jquery.com/Plugins/Validation
Это потребует больше работы, чем нажатие кнопки Enter , но, безусловно, это обеспечит более богатый пользовательский опыт.
Это сработало во всех браузерах после того, как я сильно разочаровался в других решениях. Внешняя функция name_space только для того, чтобы держаться подальше от декларирования глобусов, что я также рекомендую.
$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);
this.stifle = function(event) {
event.cancelBubble;
event.returnValue = false;
if(this.is_ie === false) {
event.preventDefault();
}
return false;
}
this.on_enter = function(func) {
function catch_key(e) {
var enter = 13;
if(!e) {
var e = event;
}
keynum = GetKeyNum(e);
if (keynum === enter) {
if(func !== undefined && func !== null) {
func();
}
return name_space.stifle(e);
}
return true; // submit
}
if (window.Event) {
window.captureEvents(Event.KEYDOWN);
window.onkeydown = catch_key;
}
else {
document.onkeydown = catch_key;
}
if(name_space.is_ie === false) {
document.onkeypress = catch_key;
}
}
}
Если в вашей форме отсутствует <текстареа>
, то просто добавьте к вашей <форме>
:
<form ... onkeydown="return event.key != 'Enter';">
Или с помощью jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
Это приведет к тому, что каждое нажатие клавиши внутри формы будет проверяться клавишей <115999]. Если это не
Enter
, то вернётся true
и всё продолжится как обычно. Если это Enter
, то он вернёт false
и всё немедленно прекратится, так что форма не будет отправлена.
Событие keydown
предпочтительнее keyup
, так как keyup
слишком поздно, чтобы блокировать отправку формы. Исторически также существовала клавиша
, но она устарела, так же как и KeyboardEvent.keyCode
. Вместо этого следует использовать KeyboardEvent.key
, который возвращает имя нажимаемой клавиши. Если установить флажок Enter
, то будет установлен флажок 13 (обычный ввод), а также 108 (ввод нумерационной палочки).
Обратите внимание, что $(window)
, как предлагается в некоторых других ответах вместо $(document)
, не работает для keydown
/keyup
в IE<=8, так что это не лучший выбор, если вы хотите прикрыть и этих бедных пользователей.
Если у вас есть <текстареа>
в вашей форме (который, конечно, должен принять клавишу Enter), а затем добавить обработчик клавиатуры к каждому отдельному элементу ввода, который не является <текстареей>
.
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
Для уменьшения boilerplate, это лучше сделать с помощью jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
Если к этим элементам ввода прикреплены другие функции обработчика событий, которые по какой-то причине вы также хотели бы вызвать на клавише enter, то вместо возврата false предотвращайте только поведение события по умолчанию, чтобы оно корректно распространилось на другие обработчики.
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
Если вы хотите разрешить ввод и на кнопках отправки тоже, то вы всегда можете уточнить селектор, как показано ниже
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
Обратите внимание, что input[type=text]
, как предлагается в некоторых других ответах, не покрывает эти нетекстовые HTML5-входы, так что это не очень хороший селектор.