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+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
OpenLayers3实现图层控件功能
Sep 25 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中使用接口实现工厂设计模式的代码
2012/06/17 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解React中setState回调函数
2018/06/14 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
python自定义异常实例详解
2017/07/11 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python绘图实现显示中文
2019/12/04 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
《理想》教学反思
2014/02/17 职场文书
九一八事变演讲稿
2014/09/05 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
安全责任书
2015/01/29 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android