因为系统的number框无法设置样式,所以休息无聊时写了一个简单的模拟number框的插件,效果不是很完善,有一些功能可能没注意到
// 简单的模拟number框插件 // 布局: // <div class="number"> // <input type="text"/> // <i>-</i><i>+</i> // </div> // 使用时进行将上方布局放入要使用number框的位置,然后自行设置CSS样式 // 使用方法:$(".number").number(); ;(function($){ "use strict"; class Number{ constructor(ele) { this.input=ele.find("input"); this.ai=ele.find("i"); this.div=ele; this.input(); this.key(); this.calculation(); return {num:this.input.val()}; }
//输入控制,限制输入的为数值或者小数点 input(){ var that=this; this.input.on("input",function(){ that.input.val(that.input.val().replace(/[^d-+.]/g,''); }) }
//按键加减功能的实现 key(){ var that=this; this.input.on("keydown",function(){ var e=event; var keyC=e.keyCode; if(keyC==38){ e.preventDefault(); } if(keyC==38||keyC==40) if(isNaN(that.input.value/1)){ that.input.val(0); } switch(keyC){ case 38:that.input.val(that.input.val()-0+1); break; case 40:that.input.val()--;break; } }); }
//加与减按钮的功能实现 calculation(){ this.ai.eq(1).click(()=>{ this.input.focus(); if(isNaN(this.input.val()/1)) this.input.val(1); this.input.val(this.input.val()-0+1); }) this.ai.eq(0).click(()=>{ this.input.focus(); if(isNaN(this.input.val()/1)) this.input.val(1); if(this.input.val()<=1){ this.input.val(1); }) this.input.val()--; } } } // 绑定number方法 $.fn.extend({ number () { var d=new Number(this); return parseInt(d.num); } }); })(jQuery);