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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
小程序实现五星点评效果
Nov 03 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php把session写入数据库示例
2014/02/26 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python3中exp()函数用法分析
2019/02/19 Python
python多线程抽象编程模型详解
2019/03/20 Python
Django Rest framework权限的详细用法
2019/07/25 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
python相对企业语言优势在哪
2020/06/12 Python
python中有帮助函数吗
2020/06/19 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
幼儿园感恩节活动方案2014
2014/10/11 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python