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 打印内容方法小结
Nov 04 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
微信小程序实现简单表格
Feb 14 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
中科创达面试题
2016/12/28 面试题
运动会跳远广播稿
2014/02/04 职场文书
高考寄语大全
2014/04/08 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
MYSQL常用函数介绍
2022/05/05 MySQL