zoukankan      html  css  js  c++  java
  • 格式化输入框的插件

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

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        #ff{
            position: relative;
             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};
  • 相关阅读:
    Android长方形图片生成正圆形,以及矩形图片生成圆角
    android应用编译失败 ResXMLTree_node size 类错误,以及 android studio 项目内搜索
    Android 不能返回 parent Activity 的问题
    如何让有物理键的手机在ActionBar始终显示更多菜单menu键
    Android抽屉效果 DrawerLayout 入门经验总结
    Android使用Home键后应用程序重启的问题
    汉王云名片识别(SM)组件开发详解
    [deviceone开发]-购物车的简单示例
    [DeviceOne开发]-白板的示例
    [DeviceOne开发]-地区选择
  • 原文地址:https://www.cnblogs.com/chenjinxinlove/p/5852317.html
Copyright © 2011-2022 走看看