HTML: dlaczego przeglądarka Android pokazuje "Go" zamiast "Next" na klawiaturze?

Aby dodać do odpowiedzi Johna, Android zawsze dodaje "Go" do wejść tekstowych i zawsze dodaje "Next" do wejść liczbowych . Chciałbym usłyszeć, jak osoba odpowiedzialna za ten wybór wyjaśni swoją logikę.

Projekt softkeyboard jest po prostu kiepski pod tym względem, ponieważ każdy użytkownik, z którym do tej pory testowałem, myślał, że duży niebieski przycisk na klawiaturze musi być przyciskiem, który zabierze cię do następnego pola formularza, a następnie do ostatniego pola formularza pozwala przesłać formularz.

IOS to nawet gorzej pod tym względem, ponieważ oferują przycisk "Idź" z każdym polem formularza i nie ma sposobu na zakładkę przez pola. Fajnie, że Apple lubi robić Komputery prostymi dla ludzi, ale czasami zakładając, że ludzie lubią to proste, można założyć, że wszyscy ludzie są idiotami.

Sorry za ten bełkot. Mam coś konstruktywnego do zaoferowania:

Jeśli twoim ostatnim polem formularza jest type = number, to jest mały hack, który będzie działał zarówno na Androidzie, jak i iOS: dodaj invisible text input to the form with onfocus= " $('#thisForm').submit();". W Androidzie to pole będzie krótko migać w widoku: w iOS nie będzie. Aby sytuacja na Androidzie była bardziej przyjemna, możesz ustawić wartość dla wprowadzania tekstu, np. "zamykanie tego formularza", lub możesz ustawić jego szerokość na 0, co spowoduje, że pole formularza nie będzie całkiem szerokości 0, ale nadal będzie bardzo małe.

Straszny hack, ale hej, zwalić to na ludzi UI w Google i Apple.

Zobacz Zastąp przycisk Go na miękkiej klawiaturze przyciskiem Next w Phonegap .

Aby uzyskać szybką nawigację zobacz tenplunker . Aby wykonać pełny kod

<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>

Uwaga: nie zapomnij zastąpić .live() Metody jquery .on() Jeśli używasz nowszej wersji jquery niż 1.9.

To jest problem z Chromium, jeśli chcesz go obejrzeć: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

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: Uwaga Windows Phone również umieszcza Android W UA, więc wymaga testów, które działają na Windows Phone (i Android Firefox).

Nie możemy zapobiec temu domyślnemu zachowaniu, ponieważ nie ma znacznika input type="next" dostępnego w HTML. Tak więc domyślnie pojawia się przycisk "Go". Poniżej link zawierający listę dostępnych tagów typu input: http://www.w3schools.com/tags/att_input_type.asp

Aby uniknąć nieporozumień dla użytkownika puścić przycisk jako przycisk enter tylko.

W tym celu użyj znacznika formularza, ale aby uniknąć niekompletnych zgłoszeń, użyj wyłączonego atrybutu na przycisku Wyślij.

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

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

});

Teraz, aby uniknąć przeładowania strony, nie używaj atrybutów action lub onsubmit w znaczniku formularza, zamiast tego użyj

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

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

callOnSubmitFunction();
return false;
}
);

Return false jest tutaj ważne, aby uniknąć przeładowania strony.

Z wyjątkiem chrome, firefox i domyślne przeglądarki android wyświetlają przyciski prev i next, które będą pracuj jako przyciski tabulacji, więc użyj odpowiedniego tabindex atrybuty na elemencie wejściowym formularza.