android 日本語入力 huawei - 電話:テキスト入力用の数字キーボード




5 Answers

2015年中頃から、私はこれが最善の解決策であると信じています。

<input type="number" pattern="[0-9]*" inputmode="numeric">

これは、AndroidとiOSの両方のテンキーパッドを提供します:

また、上/下矢印ボタンとキーボードに適した上/下矢印キーの増分で、期待されるデスクトップの動作を実現します。

type="number"pattern="[0-9]*両方を組み合わせることで、あらゆるところで動作する解決策が得られ、将来のHTML 5.1との順方向互換性はinputmode属性を提案しinputmode

注:パターンを使用すると、ブラウザのネイティブフォーム検証がトリガーされます。 これを無効にするには、 novalidate属性を使用するか、 title属性を使用して検証に失敗した場合のエラーメッセージをカスタマイズします。

たとえば、国際郵便番号のように先頭のゼロ、コンマ、または文字を入力できるようにする必要がある場合は、 この小さな変形をチェックしてください。

クレジットとそれ以上の読書:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

キーボード切り替え アンドロイド 言語

<input type="text">ために数字キーボードを電話機に押し付ける方法はありますか? 私は、HTML5の<input type="number">が "浮動小数点数"のためであることを認識しました。したがって、クレジットカード番号や郵便番号などには適していません。

私は浮動小数点数以外の数値をとる入力に対して、 <input type="number">の数値キーボード機能をエミュレートしたいと考えています。 おそらく、これを行う適切なinputタイプがもう1つありますか?




type="email"またはtype="url"すると、少なくともiPhoneなどの一部の携帯電話でキーボードが使用されます。 電話番号の場合は、 type="tel"使用できます。




私はtype="number"がセマンティックWebページに最適だと思います。 キーボードを変更したいだけなら、 type="number"またはtype="tel"使うことができます。 どちらの場合でも、iPhoneはユーザの入力を制限しません。 ユーザーは、必要な文字を入力(またはペースト)することができます。 唯一の変更は、ユーザーに表示されるキーボードです。 これを超える制限が必要な場合は、JavaScriptを使用する必要があります。




2018年:

<input type="number" pattern="\d*">

AndroidとiOSの両方で動作しています。

Android(^ 4.2)とiOS(11.3)でテストしたところ、




私はすべての状況で私のために最もよく働いたタイプを見つけることができませんでした:私は数値入力(例えば "7.5"の入力)にデフォルトする必要があったが、特定の時間にテキスト( "パス"など)を許可する。 ユーザーはテンキーパッド(例えば7.5の入力)を望んでいましたが、時折のテキスト入力が必要でした(例えば "合格")。

むしろ、フォームにチェックボックスを追加して、ユーザが入力(ID = "inputSresult")をtype = "number"とtype = "text"の間で切り替えることができるようにしました。

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

次に、上記のチェックボックスがオンになっているかどうかに基づいて、テキストと数値の間でタイプを切り替えるチェックボックスにクリックハンドラを配線しました:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

これは私たちのためにうまくいきました。




Related