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 this指针
Jul 30 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
webpack4 从零学习常用配置(小结)
May 28 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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP递归算法的简单实例
2019/02/28 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python发送Email方法实例
2014/08/21 Python
在Python下尝试多线程编程
2015/04/28 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python带参数打包exe及调用方式
2019/12/21 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
巴西购物网站:Submarino
2020/01/19 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
生日派对邀请函
2014/01/13 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书