HTML: Почему браузер Android показывает "Go" вместо "Next" на клавиатуре?

Ответ 1

Android-браузер всегда отображает Go для полей ввода, потому что в некоторых формах в Интернете (особенно в блоках поиска) нет кнопки отправки, и ее можно активировать только нажатием Enter (Go эквивалентно Enter).

Вместо некоторых версий Android будет отображаться клавиша табуляции в правом нижнем углу клавиатуры, чтобы упростить навигацию между полями формы.

Я не думаю, что вы можете предотвратить любое из этих поведений.

Возможные обходные пути:

• Используйте JavaScript, чтобы игнорировать отправку формы входа, пока оба входа не будут пустыми:

  <form name="loginForm" onsubmit="return document.loginForm.user.value != '' && document.loginForm.pass.value != ''">
      <input type="text" name="user">
      <input type="password" name="pass">
      <input type="submit" value="Login">
  </form>
  

• Самое чистое решение - установить оба входа, которые потребуются, используя новый атрибут HTML5 - , но Android-браузер пока не поддерживает. Однако хорошим подходом было бы дополнить требуемый атрибут с помощью резервной копии JavaScript, такой как , описанной в CSSKarma.

Ответ 2

Чтобы добавить к John ответ, Android всегда добавляет "Go" в текстовые входы и всегда добавляет "Next" к номерам. Я хотел бы услышать, как человек, ответственный за этот выбор, объясняет свою логику.

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

iOS это еще хуже в этом отношении, так как они предлагают кнопку "Go" с каждым полем формы и не могут вставлять поля. Приятно, что Apple любит делать компьютеры простыми для людей, но иногда полагая, что люди, подобные ей просто, могут затушевать в предполагаемых людях все идиоты.

Извините, что это напыщенная речь. У меня есть кое-что конструктивное предложение:

Если ваше последнее поле формы имеет тип = номер, то есть крошечный хак, который будет работать как на Android, так и на iOS: добавьте невидимый текст в форму с помощью onfocus = "$ ('# thisForm')..Отправить();". В Android это поле коротко начнет мигать: в iOS это не будет. Чтобы сделать ситуацию Android более приемлемой, вы можете либо установить значение для ввода текста, как "Закрытие этой формы", либо установить его ширину в 0, что приведет к тому, что поле формы будет не совсем 0 шириной, но все же очень маленькой.

Ужасный взлом, но эй, обвиняй его в пользовательских интерфейсах в Google и Apple.

Ответ 3

см. Заменить кнопку Go на мягкой клавиатуре с помощью Next в Phonegap.

Для быстрой навигации см. этот plunker. Чтобы выполнить полный код

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<form action="" id="form">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
  <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  Last name: <input type="text" name="lastname" disabled="disabled">
Select <select name="select" id="selectBox">
               <option>Select Something</option>
       </select>
    Last name: <input type="text" name="lastname">
Select <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  <button type="submit">Submit</button> 
</form>

<script>
(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        $(this).find('input, select, textarea, button').live("keydown", {localSettings: settings}, function(event) {
            if (settings.allowSubmit) {
                var type = $(this).attr("type");
                if (type == "submit") {
                    return true;
                }
            }
            if (event.keyCode == 13) {
                var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    idx = -1;
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                }
                try {
                    inputs[idx + 1].select();
                }
                catch (err) {

                }
                return false;
            }
        });
        return this;
    };
})(jQuery);

$("#form").enterAsTab({ 'allowSubmit': true});
</script>

ПРИМЕЧАНИЕ. Не забудьте заменить метод jQuery .live() на .on() при использовании более новой версии jquery than 1.9.

Ответ 4

Это проблема Chromium, если вы хотите посмотреть ее: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Ниже приведено обходное решение для Android, которое изменяет "enter" в пользовательском вводе так, чтобы оно "вносило вкладки" в поле пароля (и не отправляет форму):

http://jsbin.com/zakeza/1/quiet

<form action="?">
  User <input type=text onkeypress=key(event)><br><br>
  Password <input id=pw type=password><br><br>
  <input type=submit>
</form>

<script>
  function key(event) {
    if (event.charCode == 13 && /Android/.test(navigator.userAgent)) {
      event.preventDefault();
      document.getElementById('pw').focus();
    }
  }
</script>

Изменить: Примечание. Windows Phone также помещает Android в UA, поэтому для тестирования на Windows Phone (и Android Firefox) требуется тестирование.

Ответ 5

Чтобы избежать путаницы для пользователя, нажмите кнопку GO в качестве кнопки ввода.

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

$("input:not(.submit)").bind('input',function(){
var isValid = validateInputs();

if(isValid)
                {
                    $('.submit').removeAttr('disabled');
                }
                else
                {
                    $('.submit').attr('disabled','disabled');
                }

});

Теперь Чтобы избежать перезагрузки страницы, не используйте действие или атрибуты onsubmit в теге формы, вместо этого используйте

$('#formid').submit(function(){

var disabled=$('.submit').attr('disabled');
                if(disabled=='disabled')
                {
                    return;
                }

callOnSubmitFunction();
return false;
}
);

return false важно здесь, чтобы избежать перезагрузки страницы.

за исключением chrome, firefox и браузеры по умолчанию для Android показывают предыдущие и следующие кнопки, которые будут работать как кнопки вкладок, поэтому используйте соответствующие атрибуты tabindex на элементе ввода формы.

Ответ 6

Мы не можем предотвратить это поведение по умолчанию, потому что на данный момент нет тега type="next", доступного в HTML. Таким образом, по умолчанию появляется кнопка "Перейти". Ниже ссылки со списком доступных тегов типа входа: http://www.w3schools.com/tags/att_input_type.asp