ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryに数字のみを入力するように設定する方法

jqueryに数字のみを入力するように設定する方法

WBOY
リリース: 2022-01-10 17:22:45
オリジナル
3297 人が閲覧しました

jquery では、replace() メソッドと正規表現を使用して、数字のみを入力できるように設定できます。 replace() メソッドは、正規表現に一致する部分文字列を置換するために使用されます。内容は数値ではないため、入力されません。表示の構文は、「要素を指定する object.val().replace(/[^\d]/g,"")」です。

jqueryに数字のみを入力するように設定する方法

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery で数値のみを入力するように設定する方法

一部の入力テキスト ボックスでは、何らかの判断が必要です。数値のみを入力できます。判定には正規表現を使用します ユーザーが入力した内容が数字以外の場合、入力テキストボックスには表示されません jqで数字のみを入力するように設定する方法を見てみましょう

構文:

$('input').on('input propertychange', function(e) {
var text = $(this).val().replace(/[^\d]/g, "");
$(this).val(text)   
})
ログイン後にコピー

新しい HTML ファイルを作成します。

HTML ファイル上に入力ボックスを作成し、入力ボックスのサイズを設定します。

コード:

jquery.min.js ファイルを紹介します。

コード:

正規表現を使用してユーザーを判別する内容を入力するたびに数字でないと表示されません。

コード:

<script>
$(function(){
$(&amp;#39;input&amp;#39;).on(&amp;#39;input propertychange&amp;#39;, function(e) {
var text = $(this).val().replace(/[^\d]/g, &quot;&quot;);
$(this).val(text)   
})
})
</script>
ログイン後にコピー

画像:

jqueryに数字のみを入力するように設定する方法

HTML ファイルを保存した後、テスト用に適切なブラウザで開くと、次のようになります。入力が数値ではないことがわかりました。テキスト ボックスに内容を表示できません。図に示すように:

jqueryに数字のみを入力するように設定する方法

# すべてのコードをコピーして新しい HTML ファイルに貼り付けるだけで、保存後の効果を確認できます。

すべてのコード:







<script>
$(function(){
$(&amp;#39;input&amp;#39;).on(&amp;#39;input propertychange&amp;#39;, function(e) {
var text = $(this).val().replace(/[^\d]/g, &quot;&quot;);
$(this).val(text)   
})
})
</script>




ログイン後にコピー

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryに数字のみを入力するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート