HTML5入力タイプの数値が長い数字を再フォーマット

Question

私は、数字タイプのテキストボックスに最低15桁の数字を入力する必要があるアプリケーションがあります。

ユーザがより長い数字を入力し、> = 19桁の数字を入力した場合、右の矢印またはキーボードの矢印キーを使用すると、その数字がfloatに自動フォーマットされ、末尾にe+理想的ではありません。

<input min="0" type="number" value="7897894561234567898">

この動作を削除するか、対抗するのいずれかの最良の方法は何ですか？何かするべきことはありますか、またはテキストタイプの入力を使用する必要がありますか？ （私はむしろないと思います）。

Answer 1

HTML5 <input type=number>は、特にJavaScriptと同じNumber型を使用します。 maximum integer value before precision is lostは9007199254740991で、16桁です。

JavaScriptよりも大きな整数を扱うことはできません。文字列として扱う必要があります。

<input type=text>と、検証のためにpattern属性を使用し、タッチスクリーンにinputmode属性を使用する必要があります。デフォルトの検証メッセージは役に立ちませんので、'invalid'イベントも処理する必要があります。

（ちょうどあなたがタッチスクリーンデバイスの数字キーボードを表示するために<input type=tel>を使用する必要があります。inputmodeはどこにもサポートされていない、冗談。）

<form> 
 
    <input name=num type=tel 
 
     required pattern="\d+" 
 
     oninvalid="setCustomValidity('A number is required')" 
 
     oninput="setCustomValidity('')"> 
 
    <input type=submit> 
 
</form>

ノートは、クレジットに関する仕様でありますカード番号：

type=number状態は、入力には適切ではありませんappensは数字だけで構成されていますが、厳密には数字ではありません。たとえば、クレジットカード番号や米国の郵便番号には不適切です。 type = numberを使用するかどうかを判断する簡単な方法は、入力コントロールがスピンボックスインターフェースを持つことが合理的かどうかを検討することです（例えば、 "上"と "下"の矢印）。

参照：https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)