ホームページ > 記事 > ウェブフロントエンド > jQueryで数字と小数点のみ入力できるメソッドを実装_jquery
jQueryで数字と小数点のみ入力できるメソッドを実装_jquery
- WBOYオリジナル
- 2016-05-16 15:12:271391ブラウズ
この記事の例では、数値と小数点のみの入力を許可する jQuery メソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//示例代码：
//只允许输入数字与.:<input type="text" name="test" id="test" onkeydown="checkKeyForFloat(this.value,event)" style="ime-mode: disabled" />
//只允许输入数字 :<input type="text" name="test2" id="test2" onkeydown="checkKeyForNum(this.value,event)" style="ime-mode: disabled" />
//只允许输入数字与小数点
function checkKeyForFloat(value, e) {
var isOK = false;
var key = window.event ? e.keyCode : e.which;
if ((key > 95 && key < 106) || //小键盘上的0到9
(key > 47 && key < 60) || //大键盘上的0到9
(key == 110 && value.indexOf(".") < 0) || //小键盘上的.而且以前没有输入.
(key == 190 && value.indexOf(".") < 0) || //大键盘上的.而且以前没有输入.
key == 8 || key == 9 || key == 46 || key == 37 || key == 39 //不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
isOK = true;
} else {
if (window.event) //IE
{
e.returnValue = false; //event.returnValue=false 效果相同.
}
else //Firefox
{
e.preventDefault();
}
}
return isOK;
}
//只允许输入数字
function checkKeyForInt(value, e) {
var isOK = false;
var key = window.event ? e.keyCode : e.which;
if ((key > 95 && key < 106) || //小键盘上的0到9
(key > 47 && key < 60) || //大键盘上的0到9
key == 8 || key == 9 || key == 46 || key == 37 || key == 39 //不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
isOK = true;
} else {
if (window.event) //IE
{
e.returnValue = false; //event.returnValue=false 效果相同.
}
else //Firefox
{
e.preventDefault();
}
}
return isOK;
}
//设置有自定义属性 dtype 的文本框 允许输入的范围
function setDType() {
$(":text[dtype]").each(function () {
var dtype = $(this).attr("dtype");
var isOK = true;
switch (dtype) {
case "number":
$(this).css("ime-mode", "disabled").keydown(function (event) {
isOK = checkKeyForFloat($(this).val(), event);
if (!isOK) {
//$(this).SuperFocus("", 500);
}
return isOK;
});
break;
default:
break;
}
});
}
</script>
<script type="text/javascript">
$(function () {
setDType();
});
</script>
</head>
<body>
年龄: <input type="text" maxlength="3" onkeydown="checkKeyForInt(this.value,event)" style="ime-mode: disabled"/><br />
身高：<input type="text" maxlength="5" dtype="number" />
</body>
</html>
さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。 、「jQuery共通古典特撮まとめ」、「jQueryアニメーション・特撮使い方まとめ」、「jQueryセレクター使い方まとめ」、「jQuery」一般的なプラグインと使い方のまとめ》
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。