格式化输入框的插件

学习之用，用到项目中，还得再优化。     我的思路是：1、init初始化2、不同的类型格式化3、不同的输出方式（内部展示，外部展示）

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #ff{
        position: relative;
        width: 500px;
        height:500px;
        margin: 200px;
        border: 1px solid red;
    }
    .tip{
        display: none;
        position: absolute;
        top:-63px;
        left:0;
        z-index: 100;
        background-color:blue;
        padding:10px;
        height:40px;
        color:#585858;
    }
</style>
<body>
<div id="ff">
    <input  id="format" type='text'>
    <div id="tip" class="tip"></div>
</div>

</body>
<script src="./js/bundle.js"></script>
</html>

　　js：

index.js:


import {InputFormat} from './inputFormat.js';

let format = new InputFormat();

format.init('format','bank','out','tip')

inputFormat.js:

/**
 * Created by chen on 2016/9/7.
 */
/**
 * id:inout的id
 * type：bank（银行）和finance(金融)
 * location:inner内部 其实外部
 * outid：外部展示的id   
 */
class InputFormat{
    constructor(){
        this._type = '';
    };
    init(id, type =  'bank', location = 'inner', outid) {
        if(!id){return};
        let eleid = document.getElementById(id);
        let setdata;
        this.addLiter(eleid, 'change',() => {
            let text = eleid.value;
            //报存便于计算

            eleid.setAttribute('data-num',text.trim())
            switch (type){
                case 'bank':{
                     setdata = this.formatFi(text)
                }
                    break;
                case 'finance':{
                    setdata = this.formatBa(text)
                }
                    break;

            }
            this.setdata(eleid, setdata, location, outid)
        })
        return this;
    }
    addLiter(_e, event ,callback){
        if(typeof document.addEventListener !== undefined){
            _e.addEventListener(event,callback);
        } else{
            _e.attachEvent('on'+enent, callback);
        }
    }
    formatFi(text){
        let t = text.trim();
        if(t.length > 22){
               t =  t.slice(0, 22);
        }
        var temp = t.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
        return temp;
    }
    formatBa(s){
        if(/.+(\..*\.|\-).*/.test(s)){
            return;
        }
        s = parseFloat((s + "").replace(/[^\d\.\-]/g, "")).toFixed(2) + "";
        let l = s.split(".")[0].split("").reverse(),
            r = s.split(".")[1];
        let t = "";
        for(let i = 0, len = l.length; i < len; i ++ ) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length && (l[i+1]!='-')? "," : "");
        }
        let temp = t.split("").reverse().join("") + "." + r;
        return temp;

    }
    setdata(e, text, location, outid){
        if (location === 'inner'){
            e.value = text;
        }else{
            let d =document.getElementById(outid);
            d.innerHTML = text;

            if(!!outid){
                if(!e.value){
                    d.style.display = 'none';
                }else {
                    d.style.display = 'block';
                }
            }

        }

    }

}

export {InputFormat};

 

posted @ 2016-09-08 11:09  快乐~  阅读(337)  评论(0)  编辑  收藏  举报