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

У меня есть опрос на веб-сайте, и, похоже, некоторые проблемы с входом пользователей (я не знаю почему) и непредставление опроса (формы), не нажав кнопку отправки. Есть ли способ предотвратить это?

Я использую HTML, PHP 5.2.9 и jQuery в опросе.

ОТВЕТЫ

Ответ 1

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

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

При чтении комментариев к исходному сообщению, чтобы сделать его более удобным для использования и позволить людям нажать Enter, если они заполнили все поля:

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;
    }
  });
});

Ответ 2

Запретить ввод ключа в любом месте

Если в вашей форме нет <textarea>, просто добавьте в свою <form>:

<form ... onkeydown="return event.key != 'Enter';">

Или с помощью jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Это приведет к тому, что каждое нажатие клавиши внутри формы будет проверяться на key. Если это не Enter, то он вернет true и все продолжится как обычно. Если это Enter, то он вернет false и все сразу остановится, поэтому форма не будет отправлена.

keydown событие предпочтительнее keyup как keyup слишком поздно, чтобы блокировать отправки формы. Исторически было также keypress, но это устарело, как и KeyboardEvent.keyCode. Вместо этого вы должны использовать KeyboardEvent.key который возвращает имя нажатой клавиши. Когда проверяется Enter, то проверяется 13 (обычный ввод), а также 108 (числовой ввод).

Обратите внимание, что $(window) как предложено в некоторых других ответах вместо $(document), не работает для keydown/keyup в IE <= 8, так что это не лучший выбор, если вы хотите охватить и этих бедных пользователей.,

Разрешить ввод ключа только для текстовых областей

Если у вас есть <textarea> в вашей форме (которая, конечно, должна принимать клавишу Enter), добавьте обработчик нажатия клавиш к каждому отдельному элементу ввода, который не является <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Чтобы уменьшить шаблон, это лучше сделать с помощью jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Если к этим элементам ввода прикреплены другие функции-обработчики событий, которые по какой-либо причине вы также хотели бы вызывать по клавише ввода, тогда следует только запретить поведение по умолчанию для события, а не возвращать значение false, чтобы оно могло правильно распространяться на другие обработчики.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Разрешить ввод ключа для текстовых областей и отправить только кнопки

Если вы хотите разрешить ввод ключа также на кнопках отправки <input|button type="submit">, то вы всегда можете уточнить селектор, как показано ниже.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Обратите внимание, что input[type=text] как предлагается в некоторых других ответах, не охватывает эти нетекстовые вводы HTML5, поэтому не является хорошим селектором.

Ответ 3

Мне пришлось уловить все три события, связанные с нажатием клавиш, чтобы предотвратить отправку формы:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Вы можете объединить все это в приятную компактную версию:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Ответ 4

Раздел 4.10.22.2 Неявное представление спецификации W3C HTML5 гласит:

Кнопка по умолчанию элемента form - это первая кнопка отправки в древовидном порядке, владельцем формы которой является элемент form.

Если пользовательский агент поддерживает разрешение неявным образом отправить форму (например, на некоторых платформах, нажав клавишу "ввести", в то время как текстовое поле сосредоточено неявно представляет форму), сделайте это для формы, кнопка по умолчанию которой имеет определенную активацию поведение должно приводить к тому, что пользовательский агент запускает синтетические шаги активации щелчка по этой кнопке по умолчанию.

Примечание. Следовательно, если кнопка по умолчанию отключена, форма не представляется, если используется такой механизм неявного представления. (При отключении кнопка не активирована).

Таким образом, стандартизованный способ отключить любую неявную подачу формы состоит в том, чтобы поместить отключенную кнопку отправки в качестве первой кнопки отправки в форме:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Одна из приятных особенностей этого подхода заключается в том, что он работает без JavaScript; независимо от того, включен ли JavaScript, необходим веб-браузер, соответствующий стандартам, для предотвращения неявного представления формы.

Ответ 5

Если вы используете script для фактического представления, вы можете добавить строку "return false" в обработчик onsubmit следующим образом:

<form onsubmit="return false;">

Вызов функции submit() в форме из JavaScript не инициирует событие.

Ответ 6

Использование:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Это решение работает во всех формах на веб-сайте (также в формах, вставленных с Ajax), предотвращая только Enter s во входных текстах. Поместите его в функцию готовности документа и забудьте об этой проблеме на всю жизнь.

Ответ 7

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

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

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

Ответ 8

Я еще не могу прокомментировать, поэтому я отправлю новый ответ

Принятый ответ ok-ish, но он не останавливал передачу на numpad enter. По крайней мере, в текущей версии Chrome. Мне пришлось изменить условие кодового ключа на это, тогда оно работает.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Ответ 9

Хорошее простое решение jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Ответ 10

Это мое решение для достижения цели, он чист и эффективен.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Ответ 11

Совершенно другой подход:

  • Первый <button type="submit"> в форме будет активирован при нажатии Enter.
  • Это верно, даже если кнопка скрыта с помощью style="display:none;
  • script для этой кнопки может возвращать false, что прерывает процесс отправки.
  • У вас может быть еще один <button type=submit>, чтобы отправить форму. Просто верните true для каскадирования представления.
  • Нажатие Enter в то время как настоящая кнопка отправки будет сфокусирована, активирует реальную кнопку отправки.
  • Нажатие Enter внутри <textarea> или других элементов управления формы будет вести себя как обычно.
  • При нажатии Enter внутри <input> элементы формы будут запускать первый <button type=submit>, который возвращает false, и, следовательно, ничего не происходит.

Таким образом:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Ответ 12

Предоставление формы действия "javascript: void (0);" кажется, делает трюк

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Ответ 13

Мне нужно было предотвратить передачу только определенных входных данных, поэтому я использовал селектор классов, чтобы это было "глобальной" функцией, где бы я ни нуждался.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

И этот код jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

В качестве альтернативы, если недостаточно ключа:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Некоторые примечания:

Изменив здесь различные полезные ответы, ключ Enter работает для keydown во всех браузерах. В качестве альтернативы я обновил bind() до метода on().

Я большой поклонник селекторов классов, взвешивающий все плюсы и минусы и обсуждения производительности. Мое соглашение об именах - это "idSomething", чтобы указать, что jQuery использует его как id, чтобы отделить его от стилей CSS.

Ответ 14

  • Не используйте type = "submit" для ввода или кнопок.
  • Используйте type = "button" и используйте js [JQuery/ angular/etc] для отправки формы на сервер.

Ответ 15

Невозможно создать кнопку отправки. Просто поместите script на вход (type = button) или добавьте eventListener, если вы хотите, чтобы он передавал данные в форме.

Скорее используйте это

<input type="button">

чем использование этого

<input type="submit">

Ответ 16

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

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

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

Ответ 17

У меня была аналогичная проблема, где у меня была сетка с "текстовыми полями ajax" (Yii CGridView) и только одна кнопка отправки. Каждый раз, когда я делал поиск в текстовом поле и попадал в представленную форму. Я должен был что-то сделать с кнопкой, потому что это была единственная общая кнопка между представлениями (шаблон MVC). Все, что мне нужно было сделать, это удалить type="submit" и поместить onclick="document.forms[0].submit()

Ответ 18

Я думаю, что он хорошо освещен всеми ответами, но если вы используете кнопку с кодом проверки JavaScript, вы можете просто установить форму onkeypress для Enter, чтобы позвонить в ваш submit, как ожидалось:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Onkeypress JS может быть тем, что вам нужно. Нет необходимости в больших глобальных изменениях. Это особенно верно, если вы не тот, кто кодирует приложение с нуля, и вы были вынуждены исправить какой-либо другой веб-сайт, не разрывая его и не проверяя его.

Ответ 19

ТОЛЬКО BLOCK SUBMIT, но не другие, важные функции клавиши ввода, такие как создание нового абзаца в <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Ответ 20

Более простой и элегантный способ сделать это:

создайте функцию validate, которая возвращает true или false (с вашей бизнес-логикой внутри нее) и добавьте этот код в свой script:

$(function() {
    $('your form selector').submit(function() {
        return validate();
    });
});

Ответ 21

Что-то, чего я не видел, здесь ответил: когда вы вставляете элементы на странице, нажатие Enter, когда вы дойдете до кнопки отправки, вызовет обработчик onsubmit в форме, но он будет записывать событие как MouseEvent, Вот мое короткое решение для большинства баз:

Это не ответ на jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Чтобы найти рабочий пример: https://jsfiddle.net/nemesarial/6rhogva2/

Ответ 22

Здесь уже много хороших ответов, я просто хочу внести свой вклад с точки зрения UX. Элементы управления клавиатурой в формах очень важны.

Вопрос заключается в том, как отключить от отправки при нажатии клавиши Enter. Не следует игнорировать Enter во всем приложении. Поэтому рассмотрим прикрепление обработчика к элементу формы, а не к окну.

Отключение Enter для отправки формы должно по-прежнему допускать следующее:

  1. Подача заявки через Enter при нажатии кнопки отправки.
  2. Посылка формы, когда заполняются все поля.
  3. Взаимодействие с кнопками без отправки через Enter.

Это просто шаблон, но он следует всем трем условиям.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Ответ 23

В моем конкретном случае мне пришлось остановить ENTER от отправки формы, а также имитировать нажатие кнопки отправки. Это связано с тем, что на кнопке submit был обработчик кликов, потому что мы были в модальном окне (унаследованный старый код). В любом случае здесь мои комбо-решения для этого случая.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Этот пример использования особенно полезен для людей, работающих с IE8.

Ответ 24

Это работает для меня

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Ответ 25

Я бы хотел добавить небольшой код CoffeeScript (не тестировался в поле):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Надеюсь, вам понравится приятный трюк в предложении except).

Ответ 26

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

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Ответ 27

Вы также можете использовать 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>

Ответ 28

Использование Javascript (без проверки поля ввода):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

Если кто-то хочет применить это к конкретным полям, например, введите тип текста:

<script>
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>

Это хорошо работает в моем случае.

Ответ 29

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

Использование примера:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Ответ 30

Использование:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>