基于jquery扩展文本——之精度文本控件（数字，精度文本）

最新推荐文章于 2020-06-18 14:22:17 发布

shield-hand

最新推荐文章于 2020-06-18 14:22:17 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：精度文本控件

本文链接：https://blog.csdn.net/zhengdjin/article/details/16850493

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在我做项目过程中常常会遇到文本控件值只存在数字类型或浮点类型，比如数量，价格。常常我都需要为这值做验证，以及增加用户智能体验，能自动识别等等。从细节做起，让用户体验不一样的方便与智能。代码如下：

1。自定义函数

//控件扩展——精度控件
var Sh_decimal = function (input) {
    var _this = this, _obj, _type, _default, _fun;
    //构造函数
    this.fun_init = function () {
        if (input.obj == undefined) return;
        _obj = input.obj;
        _type = input.type ? input.type : 'int';
        _default = input.def_txt ? input.def_txt : '0';
        _fun = input.fun ? input.fun : function () { };
        _this.fun_click();
    }
    //定义函数事件
    this.fun_click = function () {
        //获取焦点事件
        _obj.focus(function () {
            if ($(this).val() == _default) {
                $(this).val('');
            }
        });
        //失去焦点事件
        _obj.blur(function () {
            var v = $(this).val();
            var _min = $(this).attr('_min');
            switch (_type) {
                case 'int':
                    {
                        if (v.isNumber()) {
                            //判断是否有最小值
                            if (_min && parseInt(v) < parseInt(_min)) {
                                $(this).val(_min);
                                if (_fun && typeof (_fun) == 'function') _fun($(this));
                                return;
                            }
                        } else
                            $(this).val(_default);
                    }; break;
                case 'decimal':
                    {
                        if (v.isDecimal()) {
                            //判断是否有最小值
                            if (parseFloat(v) < parseFloat(_min)) {
                                $(this).val(_min);
                                if (_fun && typeof (_fun) == 'function') _fun($(this));
                                return;
                            }
                            //矫正精度
                            var index = v.indexOf('.');
                            if (index == -1) {
                                $(this).val(v + '.00');
                            } else {
                                var l = v.length - index - 1;
                                for (; l < 2; l++) {
                                    v += '0';
                                }
                                $(this).val(v);
                            }
                        } else
                            $(this).val(_default);
                    }; break;
            }
        });
    }
    //实例化
    _this.fun_init();
}

2。实例调用

 new Sh_decimal({ obj: $('.txt_pay'), type: 'decimal', def_txt: '0.00' }); //金额
    new Sh_decimal({ obj: $('.ps_amount'), type: 'int', def_txt: 1 }); //库存量

从调用来看非常方便，只要实例化该类就能为文本控件实现独特的类型。

以下为示例教程：

Sh_decimal(input)

Contents

Sh_decimal(input)

obj

输入框对象

_type

类型（int（整型）/decimal）

_default

默认值

html代码

<head>

<／head>

<body>

<／body>

fun_blur()

失去焦点事件

示例:

new Sh_decimal({
　　　obj: $('.or_pay'),
　　　type: 'decimal',
　　　def_txt: '0.00',
　　　fun_blur: function () {
　　　　　　alert("失去焦点事件");
　　　}
});

展示效果:

下载地址：

js精度控件

http://www.tiaoceng.com/assemblydetail_32.html

新浪微博（求关注）地址：

http://weibo.com/zhengdjin

shield-hand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery扩展文本——之精度文本控件（数字，精度文本）

在我做项目过程中常常会遇到文本控件值只存在数字类型或浮点类型，比如数量，价格。常常我都需要为这值做验证，以及增加用户智能体验，能自动识别等等。从细节做起，让用户体验不一样的方便与智能。
复制链接

扫一扫