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 相关文章推荐
基于jquery实现省市联动特效
Dec 17 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
详解Vue的sync修饰符
May 15 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
如何开始收听短波广播
2021/03/01 无线电
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
Javascript浅谈之this
2013/12/17 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
python与idea的集成的实现
2020/11/20 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
企业精细化管理实施方案
2014/03/23 职场文书
大学生自荐材料范文
2014/12/30 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript