BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTMLの入力タグに数値しか受け付けないようにするには？

2022-04-22 20:38:02

質問

を確認する必要があります。 <input> フィールドは数値のみを値として受け取ります。 この入力はフォームの一部ではありません。したがって、送信されることはないので、送信時に検証することはできません。ユーザーが数字以外の文字を入力できないようにしたいのです。

これを実現するすてきな方法はないでしょうか？

どのように解決するのですか？

HTML 5

を使用することができます。 HTML5 入力タイプ番号 を使用すると、数値入力のみを制限することができます。 

<input type="number" name="someid" />

HTML5対応ブラウザでのみ動作します。htmlドキュメントのdoctypeを確認してください。

<!DOCTYPE html>

こちらもご覧ください https://github.com/jonstipe/number-polyfill は、古いブラウザでの透過的なサポートについてです。

JavaScript

更新情報です。 これに対する新しい、非常にシンプルな解決策があります。

<ブロッククオート

を使用することができるようになります。 任意の のような入力フィルタが必要です。 <input> , 様々な数値フィルタを含む。これは、以下のことを正しく処理します。 Copy+Paste、Drag+Drop、キーボードショートカット、コンテキストメニュー操作。 入力不可能なキー、およびすべてのキーボードレイアウト。

参照 この回答 またはご自身でお試しください。 JSFiddleで .

一般的な目的であれば、以下のようなJSバリデーションを行うことができます。 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

小数を許可する場合は、"if条件"を次のように置き換えてください。 

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

出典 HTMLテキスト入力は数値入力のみ可能

JSFiddleのデモです。 http://jsfiddle.net/viralpatel/nSjy7/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します