在原有基础上增加jquery验证小数值文本框

makoshen 2011-11-13 03:53:45 


$(document).ready(function() {        

            els = $(".rlnumber");                    

            els.each(function (index, obj) {                 

                var $this = $(this);              

                $this.bind("keyup", function () {

                    var v = $this.val();

                    $this.val(v.replace(/\D|^0/g, '0'));

                });

            });            

            els.mouseenter(function(){

            $(this).focus();

        }).keypress(function(event){

            var keycode = event.which;

            if((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8){

                event.preventDefault();

            }

        });            

            });

         document.onkeydown = KeyDown;

            function KeyDown(){

                var gk=event.keyCode;

                if(gk==13) {

                    event.keyCode = 9;

                    return; 

                }

            }

已经实现了表单中CLASS等于rlnumber的文本框只能输入整数,现在要增加一个CLASS等于FNUM的文本框可以输入整数或小数,怎么修改此JS代码啊?望高手指点,请考虑效率问题,因为文本框比较多
...全文
442 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
峭沙 2011-11-15
  • 打赏
  • 举报
 回复
上面有点小错误，粗心是魔鬼。。
<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Test</title>

    <script src="jquery.js" ></script>

    <style>

    	form{

    		margin: 40px 15%;

    		border: 1px solid black;

    		width: 70%;

    	}

    	label{

    		display: inline-block;

    		width: 60px;

    	}

    	input[type="text"], select, textarea{

    		width: 60%

    	}

    	#btn-set, h3#formHead{

    		text-align: center;

    	}

    	h3#formHead{

    		color: white;

    		background-color: blue;

    		padding: 15px;

    		margin: 0px;

    	}

    </style>

</head>

<body>

	<form id="testForm" name="testForm" action="http://www.baidu.com" method="POST">

		<h3 id="formHead">Test Form</h3>

		<fieldset>

			<label for="intBox">Int</label>

		    <input name=intBox" type="text" class="rlnumber" />

		</fieldset>

		<fieldset>

			<label for="floatBox">Float</label>

		    <input name="floatBox" type="text" class="FNUM" />

		</fieldset>

		<fieldset>

			<label for="radio">radio</label>

		    <input type="radio" name="radio" value="1" checked="checked" />

		    <span>radio-1</span>

		    <input type="radio" name="radio" value="2" />

		    <span>radio-2</span>

		</fieldset>

		<fieldset>

			<label for="select">Select</label>

			<select name="select">

				<option value="1">1</option>

				<option value="2">2</option>

				<option value="3">3</option>

			</select>

		</fieldset>

		<fieldset id="btn-set">

		    <input id="ok" type="button" value="submit" />

		    <input type="reset" value="reset" />

		</fieldset>

	</form>

    <script>

    	(function($){

	    	function isLawfulChar(key){

	    		var result = (key !== 0 && key !== 8 && key < 48) || key > 57;

	    		return !result;

	    	}

	    	function getInputBox($form){

	    		return $form.find('select, textarea, input:visible:enabled');

	    	}

	    	function isInputBox($elem){

	    		return $elem.is('textarea, select, input');

	    	}

	        

	        $('form').keypress(function(event){

	        	var target = $(event.target),

	        		keycode = event.which;

	        	if(!target.is('input.rlnumber, input.FNUM')){

	        		return;

	        	}

	        	if(keycode === 46 && target.is('input.FNUM')){

	        		var val = target.val();

	        		if(val === '' || val === null){

	                    target.val(0);

	                }else if(/\./.test(val)){

	                    event.preventDefault();

	                }

	        	}else if(!isLawfulChar(keycode)){

	                event.preventDefault();

	            }

	        	

	        }).keyup(function(event){

	        	var target = $(event.target);

	        	if(event.keyCode !== 13 || !isInputBox(target) || target.is('[type=button], [type=submit], [type=reset]')){

	        		return;

	        	}

            	var boxs = getInputBox($(this)),

            		index = boxs.index(target);

            	if(index === boxs.length){

            		this.submit();

            	}else{

	            	boxs.eq(index + 1).focus();

	            }

	            return false;

	        }).mouseover(function(event){

	        	var target = $(event.target);

	        	if(isInputBox(target)){

	        		target.focus();

	        	}

	        });

	        $('#ok').click(function(){

	        	$(this).closest('form').get(0).submit();

	        });

        })(jQuery);

    </script>

</body>

</html>
峭沙 2011-11-15
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 makoshen 的回复:]
我放在BODY里了 还是一样什么作用都没有
望真高手或者6楼的高手说明下 写的代码是怎么用啊?
[/Quote]代码都给你了，自己不会看吗。。不看代码永远不会进步
<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Test</title>

    <script src="jquery.js" ></script>

    <style>

    	form{

    		margin: 40px 15%;

    		border: 1px solid black;

    		width: 70%;

    	}

    	label{

    		display: inline-block;

    		width: 60px;

    	}

    	input[type="text"], select, textarea{

    		width: 60%

    	}

    	#btn-set, h3#formHead{

    		text-align: center;

    	}

    	h3#formHead{

    		color: white;

    		background-color: blue;

    		padding: 15px;

    		margin: 0px;

    	}

    </style>

</head>

<body>

	<form id="testForm" name="testForm" action="http://www.baidu.com" method="POST">

		<h3 id="formHead">Test Form</h3>

		<fieldset>

			<label for="intBox">Int</label>

		    <input name=intBox" type="text" class="rlnumber" />

		</fieldset>

		<fieldset>

			<label for="floatBox">Float</label>

		    <input name="floatBox" type="text" class="FNUM" />

		</fieldset>

		<fieldset>

			<label for="radio">radio</label>

		    <input type="radio" name="radio" value="1" checked="checked" />

		    <span>radio-1</span>

		    <input type="radio" name="radio" value="2" />

		    <span>radio-2</span>

		</fieldset>

		<fieldset>

			<label for="select">Select</label>

			<select name="select">

				<option value="1">1</option>

				<option value="2">2</option>

				<option value="3">3</option>

			</select>

		</fieldset>

		<fieldset id="btn-set">

		    <input id="ok" type="button" value="submit" />

		    <input type="reset" value="reset" />

		</fieldset>

	</form>

    <script>

    	(function($){

	    	function isLawfulChar(key){

	    		var result = (key !== 0 && key !== 8 && key < 48) || key > 57;

	    		return !result;

	    	}

	    	function getInputBox($form){

	    		return $form.find('select, textarea, input:visible:enabled');

	    	}

	    	function isInputBox($elem){

	    		return $elem.is('textarea, select, input');

	    	}

	        

	        $('form').keypress(function(event){

	        	var target = $(event.target),

	        		keycode = event.which;

	        	if(!target.is('input.rlnumber, input.FNUM')){

	        		return;

	        	}

	        	if(keycode === 46 && target.is('input.FNUM')){

	        		if(val === '' || val === null){

	                    this.value = 0;

	                }else if(/\./.test(val)){

	                    event.preventDefault();

	                }

	        	}else if(!isLawfulChar(keycode)){

	                event.preventDefault();

	            }

	        	

	        }).keyup(function(event){

	        	var target = $(event.target);

	        	if(event.keyCode !== 13 || !isInputBox(target) || target.is('[type=button], [type=submit], [type=reset]')){

	        		return;

	        	}

            	var boxs = getInputBox($(this)),

            		index = boxs.index(target);

            	if(index === boxs.length){

            		this.submit();

            	}else{

	            	boxs.eq(index + 1).focus();

	            }

	            return false;

	        }).mouseover(function(event){

	        	var target = $(event.target);

	        	if(isInputBox(target)){

	        		target.select();

	        	}

	        });

	        $('#ok').click(function(){

	        	$(this).closest('form').get(0).submit();

	        });

        })(jQuery);

    </script>

</body>

</html>
makoshen 2011-11-15
  • 打赏
  • 举报
 回复
结帖,另一个JS冲突,没问题了
makoshen 2011-11-15
  • 打赏
  • 举报
 回复
表单中不止2个类型CLASS文本框,所有文本框都支持回车TAB键,现在除了 class="rlnumber"/class="FNUM"这两个类型的文本框支持TAB键,其他的不支持
makoshen 2011-11-15
  • 打赏
  • 举报
 回复
[Quote=引用 21 楼 axiheyhey 的回复:]
上面有点小错误，粗心是魔鬼。。

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="jquery.js" ></scri……
[/Quote]

还是有问题,光标在其他CLASS的文本框上,回车就直接提交表单了,没有转换为TAB
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
功能就是 所有的INPNT文本框都支持回车换行,然后2个CLASS类型的文本框一个只能输入整数,一个可以输入小数
楼上的几个JS 用哪个好啊?
峭沙 2011-11-14
  • 打赏
  • 举报
 回复 
<!doctype html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Test</title>

	<script src="jquery.js" ></script>

</head>

<body>

	<input type="text" class="rlnumber"/>

	<input type="text" class="FNUM"/>

	<script>

		$('input.rlnumber').keypress(function(event){

			var keycode = event.which;

			if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){

				event.preventDefault();

			}

		});

		$('input.FNUM').keypress(function(event){

			var keycode = event.which,

				val = this.value;

			if(keycode === 46){

				if(val === '' || val === null){

					this.value = 0;

				}else if(/\./.test(val)){

					event.preventDefault();

				}

				return;

			}else if((keycode !== 0 && keycode !== 8 && keycode !== 13 && keycode < 48) || keycode > 57){

				event.preventDefault();

			}

		});

	</script>

</body>

</html>
峭沙 2011-11-14
  • 打赏
  • 举报
 回复 
<!doctype html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Test</title>

	<script src="jquery.js" ></script>

</head>

<body>

	<input type="text" class="rlnumber"/>

	<input type="text" class="FNUM"/>

	<script>

		$('input.rlnumber').keypress(function(event){

			var keycode = event.which;

			if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){

				event.preventDefault();

			}

		});

		$('input.FNUM').keypress(function(event){

			var keycode = event.which,

				val = this.value;

			if(keycode === 46){

				if(/\./.test(val)){

					event.preventDefault();

				}

				return;

			}else if((keycode !== 0 && keycode !== 8 && keycode !== 13 && keycode < 48) || keycode > 57){

				event.preventDefault();

			}

		}).change(function(){

			var val = this.value;

			if(/^\./.test(val)){

				this.value = 0 + val;

			}

		});

	</script>

</body>

</html>
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 p2227 的回复:]
引用 17 楼 makoshen 的回复:

引用 15 楼 axiheyhey 的回复:
引用 14 楼 makoshen 的回复:
回车TAB没用了
我删了当然没用了。。

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charse……
[/Quote]
我放在BODY里了 还是一样什么作用都没有
望真高手或者6楼的高手说明下 写的代码是怎么用啊?
p2227 2011-11-14
  • 打赏
  • 举报
 回复 
$(document).ready(function() {

		$(".FNUM").mouseenter(function () {

            $(this).focus();

        }).keypress(function (event) {

            var keycode = event.which;

            if ((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8 && keycode != 46) {

                event.preventDefault();

            }

        }).keyup(function (event) {

            var obj = $(this)[0];

            obj.value = obj.value.replace(/[^\d.]/g, "");

            obj.value = obj.value.replace(/^\./g, "");

            obj.value = obj.value.replace(/\.{2,}/g, ".");

            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");

        });



            els = $(".rlnumber");                    

            els.each(function (index, obj) {                 

                var $this = $(this);              

                $this.bind("keyup", function () {

                    var v = $this.val();

                    $this.val(v.replace(/\D|^0/g, '0'));

                });

            });            

            els.mouseenter(function(){

            $(this).focus();

        }).keypress(function(event){

            var keycode = event.which;

            if((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8){

                event.preventDefault();

            }

        });            

            });

         document.onkeydown = KeyDown;

            function KeyDown(){

                var gk=event.keyCode;

                if(gk==13) {

                    event.keyCode = 9;

                    return; 

                }

            }
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
2楼高手 我就是不清楚具体加在什么地方,原有功能JS不能动
请给详细指点
p2227 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 makoshen 的回复:]

引用 15 楼 axiheyhey 的回复:
引用 14 楼 makoshen 的回复:
回车TAB没用了
我删了当然没用了。。

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test……
[/Quote]他的代码是放在body后部的
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 axiheyhey 的回复:]
引用 14 楼 makoshen 的回复:
回车TAB没用了
我删了当然没用了。。

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<sc……
[/Quote]
不知道JS代码修改成这样,怎么什么功能都没有了!
所有文本框不能自动选中，两个ＣＬＡＳＳ类型的文本框不能限制整数或小数输入，回车也不能转化为ＴＡＢ了，晕死了！
高手．．．．
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 axiheyhey 的回复:]
引用 14 楼 makoshen 的回复:
回车TAB没用了
我删了当然没用了。。

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<sc……
[/Quote]

鼠标放在文本框上自动选中,是不是也被你删除了这样改?
$(this).focus();
峭沙 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 makoshen 的回复:]
回车TAB没用了
[/Quote]我删了当然没用了。。
<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Test</title>

    <script src="jquery.js" ></script>

</head>

<body>

	<form>

	    <input type="text" class="rlnumber"/>

	    <input type="text" class="FNUM"/>

	</form>

    <script>

    	(function($){

	    	function isLawfulChar(key){

	    		var boolean = (key !== 0 && key !== 8 && key !== 13 && key < 48) || key > 57;

	    		return !boolean;

	    	}

	    	function getInputBox($form){

	    		var elem1 = $form.find('select, textarea'),

	    			elem2 = $form.find('input:visible:enabled').not('[type=button], [type=submit], [type=reset]');

	    		return elem1.add(elem2);

	    	}

	    	function isInputBox($elem){

	    		var ret;

	    		if($elem.is('textarea, select')){

	    			ret = true;

	    		}else if($elem.is('input')){

	    			if($elem.is('[type=button], [type=submit], [type=reset], [type=hidden]')){

	    				ret = false;

	    			}else{

	    				ret = true;

	    			}

	    		}

	    		return ret;

	    	}

	        $('input.rlnumber').keypress(function(event){

	            var keycode = event.which;

	            if(isLawfulChar(keycode)){

	                event.preventDefault();

	            }

	        });

	        $('input.FNUM').keypress(function(event){

	            var keycode = event.which,

	                val = this.value;

	            if(keycode === 46){

	                if(val === '' || val === null){

	                    this.value = 0;

	                }else if(/\./.test(val)){

	                    event.preventDefault();

	                }

	            }else if(isLawfulChar(keycode)){

	                event.preventDefault();

	            }

	        });

	        $('form').keydown(function(event){

	        	var target = $(event.target);

	        	if(!isInputBox(target) || event.keyCode !== 13){

	        		return;

	        	}

            	var boxs = getInputBox($(this)),

            		index = boxs.index(target);

            	if(index === box.length){

            		this.submit();

            	}else{

	            	boxs.eq(index + 1).focus();

	            }

	        });

        })(jQuery);

    </script>

</body>

</html>
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 axiheyhey 的回复:]
引用 11 楼 makoshen 的回复:

我看6楼 部分代码重复了

JScript code

if((keycode != 0 &amp;&amp; keycode != 8 &amp;&amp; keycode != 13 &amp;&amp; keycode < 48) || keycode > 57){
event.pre……
[/Quote]
回车TAB没用了
峭沙 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 makoshen 的回复:]

我看6楼 部分代码重复了

JScript code

if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){
event.preventDefault();
}
[/Quote]你这有点吹毛求庇了吧，如果你觉得这么点重复不能忍受，那你就把这部分抽出来写成一个函数吧。。

峭沙 2011-11-14
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 p2227 的回复:]

那不叫换行。。。。我是觉得6楼写得更好的，不过他把这部分删除了，就是这样

JScript code
document.onkeydown = KeyDown;
function KeyDown(){
var gk=event.keyCode;
if(gk==13) {
……
[/Quote]我把那部分删掉是因那样的写法只支持IE，我又懒得写支持标准浏览器的代码，呵呵
makoshen 2011-11-14
  • 打赏
  • 举报
 回复
我看6楼 部分代码重复了



if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){

                event.preventDefault();

            }
p2227 2011-11-14
  • 打赏
  • 举报
 回复
那不叫换行。。。。我是觉得6楼写得更好的，不过他把这部分删除了，就是这样

document.onkeydown = KeyDown;

            function KeyDown(){

                var gk=event.keyCode;

                if(gk==13) {

                    event.keyCode = 9;

                    return; 

                }

            }


你先备份一下再试着改就好
加载更多回复（4）
大名鼎鼎SWFUpload- Flash+JS 上传
什么是SWFUpload？ 　　SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 　　* 可以同时上传多个文件； 　　* 类似AJAX的无刷新上传； 　　* 可以显示上传进度； 　　* 良好的浏览器兼容性； 　　* 兼容其他JavaScript库 (例如：jQuery, Prototype等)； 　　* 支持Flash 8和Flash 9； 　　SWFUpload不同于其他基于Flash构建的上传工具，它有着优雅的代码设计，开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的JavaScript事件，借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。 　　在使用SWFUpload之前，请确认你具备一定的JavaScript和DOM知识。在实际开发中，大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译 　　http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html [编辑本段]效果演示 　　* Classic Form Demo http://demo.swfupload.org/formsdemo ; 　　* Features Demo http://demo.swfupload.org/featuresdemo ; 　　* Application Demo http://demo.swfupload.org/applicationdemo ; 　　* v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ; [编辑本段]选择合适的Flash控件 　　在发行包（SWFUpload v2）中含有2个版本的Flash控件（swfupload_f8.swf 与wfupload_f9.swf），其中第一个版本拥有最佳的兼容性，但是为此损失了部分功能；而第二个版本提供了一些附加的功能但是损失了兼容性。 [编辑本段]SWFUpload的初始化与配置 　　首先，在页面中引用SWFUpload.js ，如 　　 　　然后，初始化SWFUpload ，如 　　var swfu; 　　window.onload = function () { 　　swfu = new SWFUpload({ 　　upload_url : "http://www.swfupload.org/upload.php", 　　flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480" 　　}); 　　}; 　　以下是一个标准的SWFUpload初始化设置所需的参数，你可以根据需要自己进行删减： 　　{ 　　upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL 　　file_post_name : "Filedata", 是POST过去的$_FILES的数组名 　　post_params : { 　　"post_param_name_1" : "post_param_value_1", 　　"post_param_name_2" : "post_param_value_2", 　　"post_param_name_n" : "post_param_value_n" 　　}, 　　file_types : "*.jpg;*.gif", 允许上传的文件类型 　　file_types_description: "Web Image Files", 文件类型描述 　　file_size_limit : "1024", 上传文件体积上限，单位MB 　　file_upload_limit : 10, 限定用户一次性最多上传多少个文件，在上传过程中，该数字会累加，如果设置为“0”，则表示没有限制 　　file_queue_limit : 2, 上传队列数量限制，该项通常不需设置，会根据file_upload_limit自动赋值 　　fl
jQuery 基础学习笔记总结（一）
Jquery 学习笔记 总结 感想： 此前在做网站时用到过jquery相关，特别是Ajax相关技术，可是并没有系统的进行学习和了解Jquery的强大的功能，趁这几天跟着资料主要的了解下Jquery的特性和插件，感觉原来好多前端设计中感觉很麻烦的东西，通过Jquery的函数和插件都很容易的实现了并且效果极佳。这里只是简单的介绍下Jquery有哪些知识点。 1.基础选择器 （1）. $("bu
jQuery
JavaScript操作 jQuery基础
jQuery基础课程学习笔记
这周学习的JavaScript。 课程名：JavaScript入门篇 课程地址：慕课网 http://www.imooc.com/learn/11 现整理笔记如下： jQuery 环境搭建： 引用jQuery文件库： <script language="javascript" type="text/javascript" src="1.9.0/jquery.js">(
jQuery基础笔记
搭建一个jQuery的开发环境非常方便，可以通过下列几个步骤进行。 下载jQuery文件库 在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.9.0版。 引入jQuery文件库 下载完jQuery框架文件后，并不需要任何的
JavaScript

87,927

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章