zoukankan      html  css  js  c++  java
  • number框

    因为系统的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);
  • 相关阅读:
    Express本地测试HTTPS
    在 WebStorm 中,配置能够识别 Vue CLI 3 创建的项目的别名 alias
    在线版本的ps
    功能强大的任务日历组件
    tree-shaking实战
    深入diff 算法
    【题解】[SHOI2001] Panda 的烦恼
    【题解】[JLOI2011]不重复数字
    「Codeforces Global Round #10」赛后个人总结
    【题解】[SCOI2004] 文本的输入
  • 原文地址:https://www.cnblogs.com/h-kj9527/p/11652405.html
Copyright © 2011-2022 走看看