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阻止冒泡和HTML默认操作
Nov 17 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
javascript控制台详解
Jun 25 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue-video-player 断点续播的实现
Feb 01 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
删除无限级目录与文件代码共享
2006/07/12 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python探索之自定义实现线程池
2017/10/27 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python scatter函数用法实例详解
2020/02/11 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
公司薪酬管理制度
2014/01/31 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
教师评语大全
2014/04/28 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python