js数字输入框(包括最大值最小值限制和四舍五入)

由于原文已经介绍的很好了，现在只是一些翻译和小小的补充。
例子


代码如下:

<!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.jb51.net/200911/yuanma/numeric-demo.rar

赞 (0)

相关推荐

  • JS+PHP实现用户输入数字后显示最大的值及所在位置

    JS+PHP实现用户输入数字后显示最大的值及所在位置

    本文主要给大家介绍的是关于JS+PHP实现用户输入数字后显示最大的值及所在位置的相关内容,目的:分清JS PHP的区别,拓宽思维,下面来一起看看详细的介绍: 分析 1.利用JS的prompt输入用户想要输入的值. 2.利用HTML表单的text标签将输入的值传递给PHP处理文件 3.PHP进行数值判定,选出最大值和位置. 由浅入深: 1.在JS实现获取数组的最大值. var a=[10,20,40,30]; // var max=0; var max=a[0]; for(var i=0;i<a.

  • js数字输入框(包括最大值最小值限制和四舍五入)

    由于原文已经介绍的很好了,现在只是一些翻译和小小的补充. 例子 复制代码 代码如下: <!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" > <

  • Vue.js数字输入框组件使用方法详解

    Vue.js数字输入框组件使用方法详解

    本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • js从输入框读取内容,比较两个数字的大小方法

    因为从输入框读取的内容是String类型的,所以直接比较的话,是用asc码来比较的,如果要比较数字的大小应该加上parseFloat, 比如: if(parseFloat(amnt1) < parseFloat(amnt2)){} 以上这篇js从输入框读取内容,比较两个数字的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue数字输入框组件示例代码详解

    Vue数字输入框组件示例代码详解

    数字输入框组件 实现功能:只允许输入数字(包括小数).允许设置初始值.最大值.最小值. 为了方便,这里选用Vue的 cli-service 实现快速原型开发 首先template部分代码 <template> <div class="demo"> <input-number v-model="value" :max="10" :min="0"></input-number> &l

  • 微信小程序实现MUI数字输入框效果

    微信小程序实现MUI数字输入框效果

    本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-gallery-list">默认</view> <view class="tui-gallery-list"> <view class="tui-number-group">

  • 基于Vue开发数字输入框组件

    基于Vue开发数字输入框组件

    随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

  • Vue数字输入框组件的使用方法

    最近在通过<Vue.js实战>系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发. 源代码:数字输入框组件 项目整体结构 ├── src  项目代码 │ ├── common 公共js库 │ │ ├── number.js 判断是否为数字 │ ├── components 组件 │ │ ├── inputCount.vue 数字输入框组件 │ │ ├── inputNumber.vue 数字输

  • Vue数字输入框组件使用方法详解

    Vue数字输入框组件使用方法详解

    前面的话 关于基础组件介绍,已经更新完了.这篇文章将用组件基础知识开发一个数字输入框组件.将涉及到指令.事件.组件间通信. 基础需求 只能输入数字 设置初始值,最大值,最小值 在输入框聚焦时,增加对键盘上下键的支持 增加一个控制步伐prop-step,例如,设置为10 ,点击加号按钮,一次增加10 项目搭建 在了解需求后,进行项目的初始化: <!DOCTYPE html> <html lang="en"> <head> <meta charse

  • js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    前段时间写了一个 js数据验证.js email验证.js url验证.js长度验证.js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了. js代码 复制代码 代码如下: /** * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. * * @author wangzi6hao * @version 2.1 * @desc

  • vue自定义数字输入框组件

    vue自定义数字输入框组件

    最近自己在练习组件开发,做了一个简单的数字输入框加减的组件,效果图如下: 组件可以传入三个参数,value是初始化值,max是可输入的最大值,min是可输入最小值,当然参数可以按需求继续扩展的. 组件代码如下: <template>     <div style="text-align: center;margin-top: 20px;">         <input type="text" v-model="current

随机推荐