214

電話で数字キーボードを強制的に表示させる方法はあり<input type="text">ますか? <input type="number">HTML5 は「浮動小数点数」用であるため、クレジット カード番号や郵便番号などには適していないことに気付きました。

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

4

16 に答える 16

234

できます<input type="text" pattern="\d*">。これにより、数字キーボードが表示されます。

詳細については、こちらを参照してください: iOS 用のテキスト、Web、および編集プログラミング ガイド

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

于 2011-06-28T20:20:54.173 に答える
195

2015 年半ばの時点で、これが最善の解決策であると考えています。

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

これにより、Android と iOS の両方で数字キーパッドが提供されます。

ここに画像の説明を入力

また、上/下矢印ボタンとキーボード フレンドリーな上/下矢印キーのインクリメントを使用して、期待されるデスクトップの動作を提供します。

ここに画像の説明を入力

次のコード スニペットで試してください。

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

type="number"と の両方を組み合わせることでpattern="[0-9]*、どこでも機能するソリューションが得られます。また、将来の HTML 5.1 で提案された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-テンキー/

于 2015-07-24T20:32:24.680 に答える
64

少なくとも「パスコード」のようなフィールドの場合、次のようなことを行うと<input type="tel" />、最も本物の数値指向のフィールドが生成され、オートフォーマットがないという利点もあります。たとえば、最近ヒルトンのために開発したモバイル アプリケーションでは、次のようにしました。

入力タグが TEL のタイプを持つ iPhone Web アプリケーションの表示は、自動フォーマットされ、やや直感的でない入力構成を持つタイプ番号とは対照的に、非常にまともな数字キーボードを生成します

...そして私のクライアントは非常に感銘を受けました。

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

于 2012-07-19T21:29:58.400 に答える
13

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

于 2011-05-30T16:19:37.143 に答える
11

<input type="text" pattern="\d*">を使用して数字キーボードを表示すると危険です。Firefox と chrome では、パターン内に含まれる正規表現により、ブラウザーはその表現への入力を検証します。パターンに一致しないか、空白のままにすると、エラーが発生します。他のブラウザでの意図しないアクションに注意してください。

于 2013-03-18T15:44:07.697 に答える
3

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

于 2011-06-01T12:12:00.567 に答える
0

すべての状況で自分に最適なタイプを見つけることができませんでした。数値入力 (たとえば「7.5」の入力) をデフォルトにする必要がありましたが、特定の時間にはテキスト (「pass」など) も許可する必要がありました。ユーザーは数字キーパッド (たとえば 7.5 の入力) を望んでいましたが、ときどきテキスト入力が必要でした (たとえば「pass」)。

むしろ、フォームにチェックボックスを追加し、ユーザーが入力 (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");

    }
});

これは私たちにとってうまくいきました。

于 2016-06-13T21:05:30.490 に答える