格式化输入框的插件
Posted 快乐~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了格式化输入框的插件相关的知识，希望对你有一定的参考价值。
学习之用，用到项目中，还得再优化。 我的思路是：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};
以上是关于格式化输入框的插件的主要内容，如果未能解决你的问题，请参考以下文章