私のウェブサイトには、長いランダムな数値IDを入力するための入力ボックスがあるフォームがあります。テキスト入力か数値入力か?
<input type="number">
の問題は、上/下のスピナー矢印が役に立たないことです。 ID番号は長くランダムなので、番号を増減する必要があるのは誰ですか?
ただし、<input type="text">
はユーザーが数字以外の文字を入力できるため、不適切です。
どちらが良いですか?
WHATWG HTML仕様 には、まさにこの状況に関する注記があります。そのメモによると、これはinput type="number"
の適切な使用ではありません。
type=number
状態は、たまたま数字だけで構成されていて、厳密には数字ではない入力には適していません。たとえば、クレジットカード番号や米国の郵便番号には不適切です。type=number
を使用するかどうかを決定する簡単な方法は、入力コントロールにスピンボックスインターフェイスがある(たとえば、「上」および「下」の矢印が付いている)ことが理にかなっているかどうかを検討することです。クレジットカード番号を最後の桁で1ずつ間違って取得することは、小さな間違いではなく、すべての桁を間違って取得するのと同じくらい間違っています。したがって、ユーザーが「上」および「下」ボタンを使用してクレジットカード番号を選択することは意味がありません。スピンボックスインターフェイスが適切でない場合、type = textがおそらく正しい選択です(おそらくpattern
属性を使用します)。
数字のみを指定するためのpattern
属性の使用はpattern="[0-9]+"
のようになります。IDがちょうど32桁の場合はpattern="[0-9]{32}"
のようになります。
Type = "number"を使用すると思います
次にスピナーを取り外します
-webkit-appearance: none;
-moz-appearance:textfield;
参照: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/numberhttps://developer.mozilla.org/en- US/docs/Web/CSS/-moz-appearance
これは、モバイルデバイスでは組み込みの「テンキー」で使用するためです。
-
[〜#〜]編集[〜#〜]
私はケビン・リードの答えに同意しません。理由をお話しします。
長い数字が必要な場合は、クレジットカードとしましょう。とにかく、読みやすさの理由から、スペースなどでフォーマットすることをお勧めします。電話番号と同じです。多くの人が番号の間に「一時停止」を入れて話すときに番号を書きます。それを保存すると、数値のフォーマット方法と、スペース、ハッシュタグ、ダッシュなどのない数値の両方を保存できます。
その後、ofc。あなたはテキストを入力したいでしょう。
この質問でOPがIDについて話していました
次に、間違いなくtype = "number"があります。この場合、彼はスピナーを取り除いたかっただけです。
クレジットカード番号を最後の桁で1ずつ間違って取得することは、小さな間違いではなく、すべての桁を間違って取得するのと同じくらい間違っています。したがって、ユーザーが「上」および「下」ボタンを使用してクレジットカード番号を選択することは意味がありません。
クレジットカード番号はほとんどすべてのコストで非公開のままであるため、これは理にかなっています。しかし、それはメンバーIDに適用されるとは思わない。
数値。
単純な理由で、モバイルデバイスには数字キーボードが表示され、IDの入力がはるかに簡単になります。
パターン検証では、カスタムキーボードビューは提供されません。ほとんどのブラウザーでは、数値のみを入力できるように強制するのではなく、エラーメッセージのみを生成します。