Как предотвратить нажатие клавиши ВВОД при отправке веб-формы?

Как вы предотвращаете ENTERотправку формы нажатием клавиши в веб-приложении?

[ редакция 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;
}

Теперь вы можете определить обработчик нажатия клавиш в форме:
<form [...] onkeypress = "return checkEnter (event)">

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

Клавиша ENTER просто активирует кнопку отправки формы по умолчанию, которая будет первой

<input type="submit" />

браузер находит в форме.

Поэтому нет кнопки отправки, но что-то вроде

<input type="button" value="Submit" onclick="submitform()" /> 

РЕДАКТИРОВАТЬ : В ответ на обсуждение в комментариях:

Это не сработает, если у вас есть только одно текстовое поле - но, возможно, это и есть желаемое поведение в этом случае.

Другая проблема заключается в том, что это зависит от Javascript для отправки формы. Это может быть проблемой с точки зрения доступности. Это можно решить, написав с <input type='button'/>помощью javascript, а затем вставив <input type='submit' />внутри <noscript>тега. Недостаток этого подхода заключается в том, что для браузеров с отключенной поддержкой javascript вы должны будете отправлять формы на ENTER. Это зависит от ФП, чтобы решить, каково поведение в этом случае.

Я не знаю никакого способа сделать это, не вызывая JavaScript вообще.

Вкратце ответ на чистом 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» для ввода type = 'text'. Посетители могут по-прежнему использовать клавишу «Enter» на всем сайте.

Если вы хотите отключить «Enter» и для других действий, вы можете добавить console.log (e); для ваших целей тестирования и нажмите F12 в Chrome, перейдите на вкладку «консоль» и нажмите «Backspace» на странице и загляните внутрь нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности для "e.target.nodeName" , "e.target.type" и многих других ...

Смотрите мой подробный ответ на подобный вопрос здесь

Все ответы, которые я нашел по этой теме, здесь или в других сообщениях, имеют один недостаток, то есть он предотвращает фактический триггер изменения также на элементе формы. Поэтому, если вы запускаете эти решения, событие 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");
        }
    });
});

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

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Вот и все. Клавиши будут обрабатываться как обычно браузером / полями / и т. Д. Если сработала логика ввода-отправки, то браузер найдет эту скрытую кнопку отправки и активирует ее. И тогда обработчик javascript предотвратит передачу.

Я потратил некоторое время на создание этого кросс-браузера для 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;
            }
        }
    }
}

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.

В моем случае этот jQuery JavaScript решил проблему

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return 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;
              }
           });
         });

Спасибо.

Добавьте этот тег в форму - onsubmit="return false;" тогда вы можете отправить форму только с некоторой функцией JavaScript.

Чтобы предотвратить отправку формы при нажатии enterв 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();
    }
});

Вы найдете это более простым и полезным: 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;
    } 
});

Как насчет:

<asp:Button ID="button" UseSubmitBehavior="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>

Я думаю, вы можете поймать ключ в форму в javascript и предотвратить даже пузыриться. ENTER на веб-странице в основном просто отправляет форму, в которой находится выбранный элемент управления.

Эта ссылка предоставляет решение, которое работает для меня в Chrome, FF и IE9, а также эмулятор для IE7 и 8, который поставляется с инструментом разработчика IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

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

Просто добавьте этот атрибут в ваш тег 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 обратно на страницу с формой в нем. Или же значение по умолчанию (скрытое) «имя», которое активируется нажатием клавиши, и кнопки отправки перезаписывают свои собственные значения «имя». Просто мысль.

Как насчет:

<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 в одном, не будут иметь правильного имени.

Это сработало для меня.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Вот как я это сделаю:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

положить в 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если он решит остаться в форме.