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

Question

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

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

Answer 1

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

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

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

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

Answer 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, так что это не лучший выбор.

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

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

Answer 5

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

<form onsubmit="return false;">

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

Answer 6

Использовать:

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

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

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

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

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

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

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

Я большой поклонник селекторов классов, взвешиваю все за и против и обсуждаю производительность.Мое соглашение об именах — «idSomething», чтобы указать, что jQuery использует его в качестве идентификатора, чтобы отделить его от стилей CSS.

Answer 14

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

Answer 15

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

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

Просто вызовите это в методе submit.

Answer 16

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

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

<input type="button">

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

<input type="submit">

Answer 17

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

Answer 18

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

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

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

Answer 19

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

Answer 20

ТОЛЬКО БЛОК ОТПРАВИТЬ, но не другие важные функции клавиши ввода, такие как создание нового абзаца в <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>

Answer 21

В моем конкретном случае мне пришлось запретить 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.

Answer 22

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

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

Answer 23

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

Answer 24

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

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

(Надеюсь, вам понравится этот трюк в предложении «если».)

Answer 25

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

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

Answer 26

С использованием 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>

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

Answer 27

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

Answer 28

Использовать:

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

Answer 29

В моем случае у меня было несколько jQuery пользовательский интерфейс поля автозаполнения и текстовые области в форме, поэтому я определенно хотел, чтобы они приняли Входить.Поэтому я удалил type="submit" ввод из формы и добавление привязки <a href="" id="btn">Ok</a> вместо.Затем я оформил его как кнопку и добавил следующий код:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Если пользователь заполняет все обязательные поля, validateData() успешно, и форма отправляется.