jQueryベースのテキストボックスは数値(小数、整数)のみ入力可能

jQueryベースのテキストボックスは数値(小数、整数)のみ入力可能_jquery

WBOY

リリース： 2016-05-16 15:20:04

オリジナル

1196 人が閲覧しました

実際のアプリケーションでは、テキストボックスは整数の入力のみを許可する場合もありますが、より「兄弟的」で浮動小数点数の入力を許可する場合もあります。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 を使用してコピーして貼り付けることができません。

上記のコードは比較的簡単に記述できますが、難しい点はコメント付きで記載していますので、どなたにも役立つと思います。