web-dev-qa-db-ja.com

HTML：なぜAndroidブラウザはキーボードで「次へ」の代わりに「実行」を表示しますか？

次の要素を（この順序で）含むHTMLログインフォームがあります。

  • input type=text（ユーザー名入力）
  • input type=password（パスワード）
  • input type=submit（ログインボタン）

フォーカスがtext inputにあるときに、Androidブラウザが[次へ]ボタンの代わりにソフトキーボードに[移動]ボタンを表示するのはなぜですか？]ユーザー名を入力した後、ユーザーはキーボードの右下のボタンを押すと（通常は正しいアクション）、空のパスワードでフォームが送信されますが、これは明らかに機能しません。ブラウザはパスワードを記憶するように設定されており、パスワードマネージャーがパスワードを入力できるようになっていますが、以下では自分でテストできるため、ここではそうではありません。

入力タイプのテキストに「次へ」ボタンを、入力タイプのパスワード（送信前の最後の入力）に「移動」ボタンを設定したいと思います。

問題のあるフォームの例は、 https://peda.net/:login （このフォームには、入力用の「Enter」キーを検出するコードが含まれており、最後に表示されるフォーム入力にフォーカスがない限り、フォームの送信を禁止します）。

この問題の本当の修正を知っていますか？ネイティブアプリケーションを実装している場合、Android:imeOptions="actionNext"を使用することを知っています（ を参照してくださいAndroidソフトキーキーボードの[移動]ボタンを変更する方法「次へ」 ）。ただし、この場合はHTMLフォームであり、Androidデフォルトのブラウザです。

この問題は、少なくとも次の構成で見られます。

  • Android 2.3.4（Cyanogenmod 7）で実行されている「ブラウザ」システムアプリ
  • Android 4.2.2（Cyanogenmod 10.1）で実行されている「ブラウザ」システムアプリ
  • Android 4.3.1（Cyanogenmod 10.2 M1）で実行されている「ブラウザ」システムアプリ
  • Android 4.4.2（Cyanogenmod 11.0 M3）で実行されている「ブラウザ」システムアプリ（AOSPブラウザ）
  • Android 5.5.1（Cyanogenmod 12.1）]で実行されている「ブラウザ」システムアプリ（AOSPブラウザ）[Wordの[移動]の代わりに矢印アイコンがあります]
  • Android 6.0.1（Cyanogenmod 13.0）]で実行されている「ブラウザ」システムアプリ（AOSPブラウザ）[Wordの[移動]の代わりに矢印アイコンがあります]
androidhtmlbrowserandroid-softkeyboard
55
Mikko Rantalainen

Android Webの一部のフォーム（特に検索ボックス）には送信ボタンがないため、ブラウザーは常に入力フィールドにGoを表示し、Enterキーを押すことでのみアクティブにできます（GoはEnterと同等）。

代わりに、Androidの一部のバージョンでは、キーボードの右下にタブキーが表示され、フォームフィールド間の移動が容易になります。

これらの振る舞いを防ぐことはできないと思います。

2つの可能な回避策：

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

  2. 最もクリーンな解決策は、新しいHTML5を使用して両方の入力を必須に設定することです 必須属性 -butAndroidブラウザーはまだこれをサポートしていません。しかし、良い方法は、必要な属性をJavaScriptフォールバックで補完することです CSsKarmaで説明 。

22
John Mellor

ジョンの答えに追加するには、Androidは常に「Go」をテキスト入力に追加しますおよび常に「Next」を数字入力に追加します。責任者の声を聞きたいですこの選択のために彼らの論理を説明します。

ソフトキーボードの設計は、この点でお粗末です。これまでにテストしたすべてのユーザーは、キーボードの大きな青いボタンを次のフォームフィールドに移動し、最後のフォームフィールドに移動できるボタンであると考えているためです。フォームを送信します。

iOSでは、この点でさらに悪化しています。すべてのフォームフィールドに「移動」ボタンがあり、フィールドをタブで移動する方法がないためです。 Appleはコンピューターを人々にとってシンプルにするのが好きですが、単純なもののような人々がすべての人々がばかであると推測するように陰影をつけることができます。

その暴言について申し訳ありません。私は提供する建設的なものがあります：

最後のフォームフィールドがtype = numberである場合、AndroidおよびiOS：onfocus = "$を使用して非表示のテキスト入力をフォームに追加します。 （ '#thisForm'）。submit（）; "。In Androidこのフィールドは、短時間表示されます。iOSでは表示されません。Androidより好ましい状況では、「このフォームを閉じる」などのテキスト入力の値を設定するか、幅を0に設定すると、フォームフィールドの幅がまったく0ではなく、非常に小さくなります。

恐ろしいハックですが、ちょっと、GoogleとAppleのUIの人々のせいにします。

51
Wytze

これは、見たい場合の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）。

7
robocat

Phonegapのソフトキーボードの[Go]ボタンを[Next]に置き換える を参照してください。

クイックナビゲーションについては、この 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>
_

注：1.9よりも新しいバージョンのjqueryを使用する場合は、jqueryの.live()メソッドを.on()に置き換えることを忘れないでください。

5
vinesh

ユーザーの混乱を避けるため、GOボタンはエンターボタンのみとして機能させます。

これにはformタグを使用しますが、不完全な送信を避けるには、送信ボタンでdisabled属性を使用します。

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

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

});

現在、ページのリロードを回避するには、formタグでactionまたはonsubmit属性を使用しないでください。代わりに

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

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

callOnSubmitFunction();
return false;
}
);

ここでは、ページのリロードを回避するためにfalseを返すことが重要です。

chrome、Firefox、およびデフォルトのAndroidブラウザーは、タブボタンとして機能するprevおよびnextボタンを表示するため、フォーム入力要素で適切なtabindex属性を使用します。

0
Shishir Arora

入力がないため、このデフォルトの動作を防ぐことはできませんtype="next"タグは現在、HTMLで利用可能です。そのため、デフォルトでは「実行」ボタンが表示されます。利用可能な入力タイプのタグのリストを含む以下のリンク： http://www.w3schools.com/tags/att_input_type.asp

0
VicJordan