js数字输入框(包括最大值最小值限制和四舍五入)


Posted in Javascript onNovember 24, 2009

由于原文已经介绍的很好了,现在只是一些翻译和小小的补充。
例子

<!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> 
<title>Demo</title> 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="autoNumeric.js"></script> 
<script type="text/javascript"> 
jQuery(function($) { 
$(':text').focus(function(){ 
$(':text').autoNumeric(); 
}); 
}); var change = function(){ 
//Change the rule. 
$(":text[id$='text1']").attr('alt','p2c3p0s'); 
//Clear the text 
$(":text[id$='text1']").val(''); 
$("span[id$='lblrule']").text('格式:99(范围为0-99)'); 
} 
var show = function(){ 
//format the text2 and text3. 
var convertInput = $.fn.autoNumeric.Strip($(":text[id$='text1']").attr("id")); 
$(":text[id$='text2']").val(convertInput); 
$(":text[id$='text3']").val($.fn.autoNumeric.Format($(":text[id$='text3']").attr("id"), convertInput)); 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<span id='lblrule' >格式:9999.99(范围为0-9999.99)(动态修改alt属性):  </span> 
</td> 
<td> 
<input id="text1" value="" type="text" style="TEXT-ALIGN: right" alt="p4c3p2s" size="25" /> 
<input type="button" value='格式化显示' onclick="show();" /> 
<input type="button" value='改变属性' onclick="change();"/> 
</td> 
</tr> 
<tr> 
<td> 
<span id='lbl1' >利用Strip()方法去掉了格式,如'1,123'变为'1123'(仅显示第一个文本框内容):  </span> 
</td> 
<td> 
<input id="text2" value="" type="text" style="TEXT-ALIGN: right" readonly="readonly" alt="p4c3p0S" size="25" /> 
</td> 
</tr> 
<tr> 
<td> 
<span id='lbl2' >格式化数字,这里做的是四舍五入取整,如'5.6'变为'6'(仅显示第一个文本框内容):  </span> 
</td> 
<td> 
<input id="text3" value="" type="text" style="TEXT-ALIGN: right" readonly="readonly" alt="p4c3p0S" size="25" /> 
</td> 
</tr> 
</table> 
</body> 
</html>

本plugin的特性:

.只能输入数字,小数分隔符(包括小数点),负号.
.支持在同一个页面上每个text input的不同输入格式,也就是说可以对页面上每一个输入框进行自定义设置.
.九种不同的数字修约规则(就是四舍五入那些)
.可以分别针对整数和小数设置最大值,最小值(很好用)
.输入值可以只为正数,也可以正负数.
.只有小数和零时,前导符可以为零。不过如输入数为"900"时,删掉"9"它会保留00.
.支持粘贴,不过粘贴文字时会变成"0.00".
.公共方法Strip()可以去掉格式化.
.公共方法Format()可以将需要的值进行格式化.

关于alt属性中的设置:

alt中一共有7个字符,分别代表了7个格式化属性:
第一个:值为'p'(只能输入正数)或者'n'(正负都可以输入)
第二个:值为0-9,分别代表小数点分隔符左边的位数.(当为'0'时可以输入15位整数)
第三个:用做数字分组的分隔符(就是千分位等等用的分隔符)
a:单引号或撇号(计时和角度时可以用)
c:逗号(默认)
p:句号(如果小数点的分隔符也是句号会有冲突)
s:空格号
x:无
第四个:值为2,3(默认),4,用作数字分组的数字个数(如'3'的话为'123,123','4'的话为'12,3123','2'的时候好像是印度那边有这种分法,看原文作者写的)
第五个:小数点的分隔符.值有c(逗号)和p(句号),p为默认.
第六个:小数位的个数
:不允许输入小数,也就是说只能输入整数
-9:小数位数(默认为2,如'1.23')
a-Z:包括大小写,它会找id为'dp[a-Z]'的数字输入框,并将里面的数字作为小数的位数,也就是说可以动态修改小数位数.
第七个:九种不同的数字修约规则
S = Round-Half-Up Symmetric (默认,一般四舍五入就用它了)
A = Round-Half-Up Asymmetric
s = Round-Half-Down Symmetric
a = Round-Half-Down Asymmetric
B = Round-Half-Even "Bankers Rounding"(银行家算法?没用过)
U = Round Up "Round-Away-From-Zero"(最大整数时用这个,当然不仅仅是整数范畴,可以精确到小数位)
D = Round Down "Round-Toward-Zero"(最小整数时用这个)
C = Round to Ceiling "Toward Positive Infinity"
F = Round to Floor "Toward Negative Infinity"

关于这个数字修约规则有一篇英文文章,可以参考。
http://www.diycalculator.com/popup-m-round.shtml
还有一些关于粘贴的特性和数字修约的一些例子就不一一介绍了。有兴趣的可以上作者的原文看看。
非常感谢作者能提供一个这么好的Jquery plugin.
测试代码打包http://xiazai.3water.com/200911/yuanma/numeric-demo.rar
Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js类的静态属性和实例属性的理解
Oct 01 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 #Javascript
js loading加载效果实现代码
Nov 24 #Javascript
jquery.ui.draggable中文文档
Nov 24 #Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 #Javascript
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
laravel安装和配置教程
2014/10/29 PHP
php操作mongoDB实例分析
2014/12/29 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python自动化测试实例解析
2014/09/28 Python
Python下的twisted框架入门指引
2015/04/15 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python开发游戏的前期准备
2019/05/05 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
仓库管理员岗位职责
2014/03/19 职场文书
新年团拜会主持词
2014/04/02 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
水电施工员岗位职责
2015/04/11 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书