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

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

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

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

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

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

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

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

примечание: не забудьте заменить .live() метод jquery с .on() при использовании более новой версии jquery, чем 1.9.

это проблема хрома, если вы хотите посмотреть его: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>

Edit: Примечание Windows Phone также ставит Android в UA, поэтому необходимо тестирование, которое работает на Windows Phone (и Android Firefox).

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

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

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

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

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

});

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

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

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

callOnSubmitFunction();
return false;
}
);

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

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