js数字输入框_javascript技术_脚本之家

作者:联系我们

由于原文已经介绍的很好了,现在只是一些翻译和小小的补充。 例子 复制代码 代码如下:

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

图片 1

Demo

复制代码 代码如下:

看惯了可能是XXX最好的,可能是XXXX目前最好的,今天我也用下这个标题,哈哈。别喷我,当然我也就吹吹牛。有很多好的方法来实现。

格式:9999.99:
利用Strip()方法去掉了格式,如'1,123'变为'1123':
格式化数字,这里做的是四舍五入取整,如'5.6'变为'6':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<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();
});
});

本文主要还是用来讲解下InputFilter的使用。

一般金额类的输入需求比较多,我们这里就用金额输入框做实例。其他的类似的文字,大小写字母等需求限制也是同理的。

某天产品经理 A拿着菜刀到我身边说:

本plugin的特性: .只能输入数字,小数分隔符,负号. .支持在同一个页面上每个text input的不同输入格式,也就是说可以对页面上每一个输入框进行自定义设置. .九种不同的数字修约规则 .可以分别针对整数和小数设置最大值,最小值 .输入值可以只为正数,也可以正负数. .只有小数和零时,前导符可以为零。不过如输入数为"900"时,删掉"9"它会保留00. .支持粘贴,不过粘贴文字时会变成"0.00". .公共方法Strip()可以去掉格式化. .公共方法Format()可以将需要的值进行格式化. 关于alt属性中的设置: alt中一共有7个字符,分别代表了7个格式化属性: 第一个:值为'p' 第二个:值为0-9,分别代表小数点分隔符左边的位数. 第三个:用做数字分组的分隔符 a:单引号或撇号 p:句号 s:空格号 x:无 第四个:值为2,3,4,用作数字分组的数字个数(如'3'的话为'123,123','4'的话为'12,3123','2'的时候好像是印度那边有这种分法,看原文作者写的) 第五个:小数点的分隔符.值有c,p为默认. 第六个:小数位的个数 :不允许输入小数,也就是说只能输入整数 -9:小数位数 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" 关于这个数字修约规则有一篇英文文章,可以参考。 plugin.测试代码打包

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)');
}

第一次交锋

A:小B啊,这个界面的金额输入框输入的钱小数点后最多二位,也就是最多到分,还有那个界面的这个地方,填金额也是精度到分。

唯唯诺诺的我:好的,马上完成。

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>

1.控制小数点后位数:

因为有很多界面都要用到,所以我们专门抽出一个类来进行控制,并且我们知道,我们要控制EditText控制它的输入内容,其实相当于是对其进行过滤,所以我们让我们的类实现InputFilter接口。

public class PointLengthFilter implements InputFilter {
    @Override
    public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
        return null;
    }
}

发现一定要我们实现filter方法,从字面意思看我们也知道是过滤,那我们来看下具体的参数字段的意思:

字段 类型 内容
source CharSequence 为即将输入的字符串
start int source的start, start 为0
end int source的end ,因为start为0,end也可理解为source长度了
dest Spanned 输入框中原来的内容
dstart int 要替换或者添加的起始位置,即光标所在的位置
dend int

要替换或者添加的终止始位置,若为选择一串字符串进行更改,则为选中字符串 最后一个字符在dest中的位置

我们来假设下,我们通过键盘依次输入12345,我们可以看到相应的值:

source:1,start:0,end:1,dest:,dstart:0,dend:0
source:2,start:0,end:1,dest:1,dstart:1,dend:1
source:3,start:0,end:1,dest:12,dstart:2,dend:2
source:4,start:0,end:1,dest:123,dstart:3,dend:3
source:5,start:0,end:1,dest:1234,dstart:4,dend:4

大家可能会发现start一直为0,end一直为1,因为我们是依次输入的,比如你复制三个字符,通过粘贴复制的方式加入到EditText中,这时候就不是0和1了,而是0,3。

所以根据这个小数点位数需求,我们先来第一版的Filter(有问题版本)

public class PointLengthFilter implements InputFilter {

    private static final int DECIMAL_DIGITS = 2;//小数的位数

    @Override
    public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
        // 删除等特殊字符,直接返回
        if ("".equals(source.toString())) {
            return null;
        }
        //原来输入框已有的内容
        String dValue = dest.toString();
        //通过小数点来进行拆分,分为小数点前面的字符串和小数点后面的字符串
        String[] splitArray = dValue.split("\.");
        if (splitArray.length > 1) {
            //获的小数点后面的字符串
            String dotValue = splitArray[1];
            //判断小数点后面的当前位数是不是已经大于等于规定的2了
            //如果已经2位了,则返回"";
            if (dotValue.length() >= DECIMAL_DIGITS) {
                return "";
            }
        }
        return null;
    }
}

然后在我们的Activity中设置:

EditText editText = (EditText) findViewById(R.id.et_money);
editText.setFilters(new InputFilter[]{new PointInputFilter()});

PS :可以把过滤的条件单独写出来分为好几个文件,因为传入的是InputFilter数组。

这样。我们终于实现了小数点后面的位数控制了。

如下图所示,我们输入12345.67之后,再输入其他字符,在filter中就默认返回了一个空的字符串"",所以就等于没输入其他内容进去。

图片 2


本文由杏彩发布,转载请注明来源

关键词: