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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python解析、提取url关键字的实例详解
2018/12/17 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
介绍一下Ruby的特点
2013/01/20 面试题
户外活动策划方案
2014/03/12 职场文书
电子商务专业自荐信
2014/06/02 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
排查MySQL生产环境索引没有效果
2022/04/11 MySQL