Как я могу запретить кнопке Go на iPad / iPhone публиковать форму - PullRequest
Новая
       17

Как я могу запретить кнопке Go на iPad / iPhone публиковать форму

21 голосов
/ 08 марта 2012

У меня есть динамическая форма, которая должна отображаться на iPad.

В этой форме есть несколько переключателей, несколько текстовых полей и одна кнопка отправки.

В iPad кнопка GO на виртуальной клавиатуре должна действовать как клавиша ввода, вызывая нажатие первой кнопки отправки в форме и размещение формы.

Чтобы избежать чрезмерных непроизвольных публикаций до заполнения формы, мы добавили дополнительную кнопку отправки вверх в форме, абсолютно расположенную вне видимой области с помощью onclick = "return false;". Это перехватывает нажатие клавиши ввода, предотвращая случайную публикацию в любом браузере, кроме Safari Mobile.

На iPad мы даже протестировали мобильный Opera, и он работает как положено.

Но Safari Mobile, по-видимому, игнорирует возвращаемое значение false, так как событие, вызываемое нажатием кнопки, вызывает публикацию, которую не делает другой браузер, даже сафари на ПК.

Мои вопросы

1: Почему Safari Mobile игнорирует «return false» при отправке, есть ли здесь другой механизм?

2: Как запретить Safari mobile публиковать форму при нажатии GO?

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

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

Пример тестовой страницы: http://lab.dnet.nu/ipad.php

Ответы [ 6 ]

29 голосов
/ 20 марта 2012

Я нашел решение своей проблемы.

Основой проблемы является то, что Safari mobile игнорирует onsubmit = "return false" для кнопок, она работает только для форм.

Установка onsubmit = "return false;" на форме сделать обычную кнопку (не отправлять) и установить onclick = "form.submit ()".

Ex. 

<form method="post" onsubmit="return false;">
    ... //Other fields here

    <input type="button" value="Send" onclick="form.submit();" />
</form>

Кнопка Go не вызывает обычную кнопку, только кнопки отправки. Поскольку форма имеет onsubmit="return false;", она не будет отправлена.

Кнопка, с другой стороны, при нажатии вызывает onclick="form.submit();", который переопределяет отправку в форме.

Это решение работает надежно в любом браузере.

7 голосов
/ 11 сентября 2014

Лучший ответ такой. Другой не позволяет использовать обычную кнопку отправки. Атакует только кнопка перехода. 

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});
0 голосов
/ 14 марта 2018

Не могу комментировать, поэтому я должен добавить новое сообщение.

@ Решение David отлично работает, если мы используем «кнопку типа ввода»; вместо этого , если мы используем тег кнопки, кажется, не решен Дэвидом исправлением .

(env: cordova, ipad mini 2)

Спасибо, Дэвид!

0 голосов
/ 01 апреля 2016

Кнопки «Go» и «Return» на мобильных клавиатурах с сенсорным экраном запускают событие onclick вашей первой кнопки отправки.Чтобы определить, нажал ли пользователь или скрипт на кнопку, вы можете использовать следующее: 

$('#mybuttonId').onclick(e) {
  if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
    //This is the user clicking on the button.
  } else {
    //This is not the user, but a script , do nothing.
    return false;
  }
}
0 голосов
/ 06 августа 2013

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

При условии, что вы используете jQuery, следующий фрагмент должен помешать кнопке «Перейти» инициировать отправку формы (по крайней мере, это происходит в Nexus 7 Chrome на Android 4.2.2; YMMMV). Также обратите внимание, что если вы хотите, чтобы клавиша «Ввод» работала на любом из указанных ниже типов ввода, это предотвратит это. 

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',     
    function (e) { 
        // Android maps the "Go" button to the Enter key => key code 13
        if (e.keyCode == 13) {
            return false; 
        }
    });

Редактировать: Кажется, эта ошибка ломается keyup / keydown в Chrome в Android> 4.3, и в этом случае это исправление больше не будет работать при некоторых обстоятельствах.

0 голосов
/ 25 июня 2013

Кажется очень нетрадиционным, поскольку это в основном нарушает общий UX и ожидаемое поведение устройства.

Однако я также считаю важным упомянуть, что это решение основано на фактическом элементе <form> DOM.Это означает, что обработчик onclick на кнопке не должен использовать объект jQuery для отправки, но элемент DOM.

объект jQuery.Не работает: 

<input type="button" value="Send" onclick="$("#myform").submit();" />

элемент DOM.Работы: 

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />

Без jQuery.Работает: 

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />

Кроме того, здесь аналогичный подход, использующий jQuery для перехвата отправки с клавиатуры и допускающий только нажатия кнопки на кнопке.Кредит переходит к @levi: http://jsfiddle.net/RsKc7/

...