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

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

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

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

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

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

Если у вас нет <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 (ввод numpad).

Обратите внимание, что, $(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, так что это не хороший селектор.

Раздел 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 или нет, требуется веб-браузер, соответствующий стандартам, чтобы предотвратить неявную отправку формы.

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

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

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

<form onsubmit="return false;">

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

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

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

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

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

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

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

Хорошее простое маленькое решение jQuery:

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

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

Принятый ответ в порядке, но он не остановил отправку при вводе номера. По крайней мере, в текущей версии Chrome. Я должен был изменить условие кода ключа к этому, тогда это работает.

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

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

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

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

1. Первый <button type="submit">в форме будет активирован при нажатииEnter .
2. Это верно, даже если кнопка скрыта с style="display:none;
3. Сценарий для этой кнопки может вернуться false , что прерывает процесс отправки.
4. У вас все еще может быть другой, <button type=submit>чтобы отправить форму. Просто вернитесь trueк каскадному представлению.
5. Нажатие в Enterто время, когда кнопка реального отправки сфокусирована, активирует кнопку реального отправки.
6. Нажатие Enterвнутри <textarea>или другие элементы управления формы будут вести себя как обычно.
7. Нажатие 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>

Придание форме действия 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>

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

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

<input type="button">

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

<input type="submit">

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

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

<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 использует его как идентификатор, чтобы отделить его от стиля CSS.

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

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

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

ТОЛЬКО 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>

Это идеальный способ, Вы не будете перенаправлены со своей страницы

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

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

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

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

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

Здесь уже есть много хороших ответов, я просто хочу внести свой вклад с точки зрения 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;
  }
});

Что-то, чего я не видел, ответило здесь: когда вы перемещаетесь по элементам на странице, нажатие 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/

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

    $('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.

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

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

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

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

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

Используя 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>

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

Зайдите в свой 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>

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

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

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