Як запобігти натискання клавіші ENTER для надсилання веб-форми?

Як ви запобігаєте 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 = "повернути checkEnter (подія)">

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 з оброблювача, що надсилається

<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()" /> 

EDIT : У відповідь на обговорення в коментарях:

Це не працює, якщо у вас є лише одне текстове поле, але, можливо, саме в цьому випадку потрібна поведінка.

Інша проблема полягає в тому, що для надсилання форми покладається 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 в хромі, перейдіть на вкладку "консоль" і натисніть "назад" на сторінці та загляньте всередину, щоб побачити, які значення повертаються, тоді ви можете націлити всі ці параметри для подальшого покращення коду. вище, щоб відповідати вашим потребам у "e.target.nodeName" , "e.target.type" та багатьох інших ...

Дивіться мою детальну відповідь на подібне запитання тут

У всіх відповідях, які я знайшов на цю тему, тут чи в інших публікаціях, є один недолік, і це перешкоджає фактичному запуску змін і на елементі форми. Тож якщо ви запускаєте ці рішення, подія onchange також не спрацьовує. Для подолання цієї проблеми я змінив ці коди і розробив наступний код для себе. Я сподіваюся, що це стане в нагоді для інших. Я дав клас моїй формі "preven_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 (PC) та 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;
            });
}

Запобігання "ENTER" надіслати форму може доставити незручність для деяких користувачів. Тож було б краще, якщо ви дотримуєтесь наведеної нижче процедури:

Напишіть подію "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на a 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"/>

Перевірте цю статтю Як запобігти натискання клавіші ENTER для надсилання веб-форми?

$(“.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 і запобігти рівномірному барботажу, я думаю. Вхід на веб-сторінці в основному просто подає форму, в яку розміщено поточний вибраний елемент керування.

Це посилання надає рішення, яке працювало для мене в 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" для подання, яка є прихованою або має значення "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, коли ви натиснете кнопку повернення в одну, не буде мати правильного імені.

Це працювало для мене.
onkeydown = "повернутися! (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);

або десь усередині тегу тіла

<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якщо він вирішить залишитися на формі.