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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
js属性对象的hasOwnProperty方法的使用
Feb 05 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防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js验证上传图片的方法
2015/05/12 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Python中装饰器的一个妙用
2015/02/08 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Django Form常用功能及代码示例
2020/10/13 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
大学生毕业求职的自我评价
2013/09/29 职场文书
项目经理的岗位职责
2013/11/23 职场文书
中文专业自荐书
2014/06/29 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
教师个人年度总结
2015/02/11 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Java使用jmeter进行压力测试
2021/07/09 Java/Android
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS