ホームページ > 記事 > ウェブフロントエンド > jQueryベースのテキストボックスは数値(小数、整数)のみ入力可能_jquery
jQueryベースのテキストボックスは数値(小数、整数)のみ入力可能_jquery
- WBOYオリジナル
- 2016-05-16 15:20:041159ブラウズ
実際のアプリケーションでは、テキスト ボックスは整数の入力のみを許可する場合もありますが、より「兄弟的」で浮動小数点数の入力を許可する場合もあります。jquery を使用して を実装する方法をサンプル コードを通して紹介します。テキスト ボックスには小数点 のみを入力できます。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$(".NumText").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/g,''));
}).bind("paste",function(){
$(this).val($(this).val().replace(/[^0-9.]/g,''));
})
});
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>
上記のコードは要件を満たしています。テキスト ボックスには整数または浮動小数点数のみを入力できます。コードは比較的単純なので、ここでは紹介しません。
次に、jquery を使用して、テキスト ボックスが整数のみを入力できることを実現する方法を紹介します。
場合によっては、テキスト ボックスの内容に整数のみを入力できるように規定する必要がある場合があります。必要な友人の参考のために、この機能を実現できるコード例を示します。
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$(".NumText").keyup(function(){
$(this).val($(this).val().replace(/\D|^0/g,''));
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,''));
})
});
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>
上記のコードは、予想される要件を満たしています。テキスト ボックスには整数のみを入力できます。以下はその実装プロセスの概要です。
コードのコメント:
1.$(function(){})、ドキュメント構造が完全にロードされたら、関数内のコードを実行します。
2.$(".NumText").keyup(function(){})、テキストボックスのキーアップイベント処理関数を登録します。
3.$(this).val($(this).val().replace(/D|^0/g,''))、replace() 関数を通じて正規表現を使用して、数値以外のコンテンツを空に置き換えます。 。
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));})、レジスタペーストイベント処理もちろん、ここではあいまいなチェーン呼び出しが使用されており、ユーザーが Ctrl+V を使用してコピーして貼り付けることができません。
上記のコードは比較的簡単に記述できますが、難しい点はコメント付きで記載していますので、どなたにも役立つと思います。