Забороніть користувачам подавати форму, натиснувши Enter

У мене є опитування на веб-сайті, і, здається, є деякі проблеми з тим, що користувачі натискають на клавішу 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 (введення цифри).

Зауважте, що, $(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";
});

Якщо на цих елементах введення приєднані інші функції обробника подій, які ви також хочете з певних причин викликати на клавіші Enter, тоді лише запобігайте поведінці за замовчуванням події, а не повертати помилкову, щоб вона могла належним чином поширюватися на інші обробники.

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

Якщо ви використовуєте сценарій для фактичного надсилання, ви можете додати рядок "повернути помилковий" до оброблювача, що надсилається таким чином:

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

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

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

Для цього знадобиться більше роботи, ніж Enterнатискання кнопки, але, безумовно, це забезпечить багатший користувацький досвід.

Приємне просте маленьке рішення jQuery:

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

Я поки не можу коментувати, тому я опублікую нову відповідь

Прийнята відповідь - це нормально, але подати заявку на введення numpad не вдалося. Принаймні в поточній версії 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 / тощо], щоб подати форму на сервер.

Мені потрібно було запобігти надсиланню лише певних вхідних даних, тому я використовував перемикач класів, щоб це було "глобальною" особливістю там, де мені це потрібно.

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

Просто зателефонуйте до цього методу подання.

ТОЛЬКО БЛОК ПОДІБИТИ, але не інші важливі функціональні можливості клавіші введення, такі як створення нового абзацу в <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 pattern). Все, що я мав зробити, - це зняти type="submit"та покластиonclick="document.forms[0].submit()

Я думаю, що це добре висвітлено з усіма відповідями, але якщо ви користуєтесь кнопкою з кодом перевірки JavaScript, ви можете просто встановити натискання клавіші форми для клавіші 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коли ви переходите до кнопки подання, запускає обробник, що надсилає форму, але він запише подію як 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>