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

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

683 голосов
/ 22 мая 2009

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

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

Ответы [ 28 ]

0 голосов
/ 30 декабря 2009

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

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

0 голосов
/ 24 августа 2016

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

0 голосов
/ 12 января 2016

В моем случае у меня было несколько jQuery UI полей автозаполнения и текстовых полей в форме, поэтому я определенно хотел, чтобы они принимали Введите . Поэтому я удалил ввод 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() завершается успешно и форма отправляется.

0 голосов
/ 09 ноября 2012

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

// 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>
0 голосов
/ 14 марта 2013

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

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});
0 голосов
/ 19 июня 2019

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

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

0 голосов
/ 01 августа 2013

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

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

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

Страница:
...