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

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

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

В iPad виртуальная клавиатура GO-кнопка должна действовать как ad key, в результате чего первая кнопка отправки в форме должна быть нажата, а форма должна быть опубликована.

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

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

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

Мои вопросы

1: Почему сафари-мобиль игнорирует "return false" на submit, есть ли другой механизм здесь?

2: Как отключить мобильную версию Safari при отправке формы при нажатии кнопки GO?

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

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

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

Ответы

Ответ 1

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

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

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

Исх.

<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();", который переопределяет onsubmit в форме.

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

Ответ 2

Лучше ответить на этот вопрос. Другой не позволяет вам использовать обычную кнопку отправки. Это атакует только кнопку go.

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});

Ответ 3

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

Ответ 4

Вот еще один ответ, если кто-то завершает эту проблему, как я.

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

$(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, и в этом случае это исправление не будет более продолжительная работа в некоторых случаях.

Ответ 5

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

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