Запретить пользователям отправлять форму, нажав Enter

687
задан Peter Mortensen 17 December 2016 в 10:23
поделиться

7 ответов

Вы можете использовать такой метод, как

$(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;
    }
  });
});
836
ответ дан 22 November 2019 в 21:31
поделиться

Войдите в свою CSS и добавьте, что к нему затем автоматически заблокирует представление Вашего формуляра, пока Вы имеете, отправляют вход, если Вы больше не хотите это, можно удалить его или тип activate и deactivate вместо этого

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }
0
ответ дан 22 November 2019 в 21:31
поделиться

Можно также использовать 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>
1
ответ дан 22 November 2019 в 21:31
поделиться

Вы можете создать метод JavaScript, чтобы проверить, была ли нажата клавиша Enter , и если да, то остановить отправку.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Просто вызовите это при метод отправки.

5
ответ дан 22 November 2019 в 21:31
поделиться

Вместо того, чтобы запрещать пользователям нажимать Enter , что может показаться неестественным, вы можете оставить форму как есть и добавить дополнительную проверку на стороне клиента: когда опрос не проводится завершено, результат не отправляется на сервер, и пользователь получает приятное сообщение о том, что нужно завершить, чтобы заполнить форму. Если вы используете jQuery, попробуйте подключаемый модуль Validation:

http://docs.jquery.com/Plugins/Validation

Это потребует больше работы, чем нажатие кнопки Enter , но, безусловно, это обеспечит более богатый пользовательский опыт.

21
ответ дан 22 November 2019 в 21:31
поделиться

Это сработало во всех браузерах после того, как я сильно разочаровался в других решениях. Внешняя функция 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;    
        }
    }
}

-2
ответ дан 22 November 2019 в 21:31
поделиться

Запретить ввод где угодно

Если в вашей форме отсутствует <текстареа>, то просто добавьте к вашей <форме>:

<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-входы, так что это не очень хороший селектор.

.
572
ответ дан 22 November 2019 в 21:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: