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下高性能字符串连接StringBuffer类
Aug 16 Javascript
Seajs的学习笔记
Mar 04 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 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 实例化类的一点摘记
2008/03/23 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 画出来六维图
2019/07/26 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
How TDD works
2012/09/30 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
大学新生军训感言
2014/02/25 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
企业承诺书怎么写
2014/05/24 职场文书
董事长助理工作职责
2014/06/08 职场文书
治安消防安全责任书
2014/07/23 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis