因为系统的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);

number框的更多相关文章

  1. 解决Input number 框能够能够输入eeeeee 的问题

    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 在input  type="n ...

  2. HTML5 number类型文本框step属性的验证机制——张鑫旭

    我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...

  3. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  4. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  5. h5 input 的验证

    <input type="text" id="a" required/> <input type="text" id=&q ...

  6. 20145306 网路攻防 web安全基础实践

    20145306 网络攻防 web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Reflected XSS At ...

  7. javascript弹出框打印某个数值时,弹出NaN?(not a number)

    一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...

  8. js值类型转换(boolean/String/number),js运算符,if条件,循环结构,函数,三种弹出框

    js值类型转换 number | string | boolean boolean类型转换 num = 0; var b1 = Boolean(num); console.log(b1) 转化为数字类 ...

  9. element select下拉框绑定number类型

    vue 开发中element-ui库的switch开关绑定number类型数据不成功问题 解决方法

随机推荐

  1. Shell 脚本举例

  2. VMware 设置桥接方式 本机使用WLAN

    最近使用开始VMware,以前一直用vritual box ,回归正题. 问题: VMware网络连接使用桥接方式如何做? 环境: 系统:centOS6.7 主机:win10 虚拟机:VMware10 ...

  3. java 字符串常量池

  4. MySQL MHA+Keepalived

    一.MHA的简单介绍MHA是由perl语言编写的,用外挂脚本的方式实现mysql主从复制的高可用性.MHA可以自动检测mysql是否宕机,如果宕机,在10-30s内完成new master的选举,应用 ...

  5. Java NIO学习(Path接口、Paths和Files工具类的使用)

    NIO学习:Paths和Files工具类的使用 JDK1.7引入了新的IO操作类.在java.nio.file包下,Java NIO Path接口和Files类. Path接口:Path表示的是一个目 ...

  6. java资料搜索网站

    http://yun.java1234.com/ 盘多多 B站 一个集成了很多springboot功能的地址 https://gitbub.com/runzhenghengbin/SpringBoot ...

  7. 使用yum命令报错

    树莓派(Raspberry Pi 3) centos7使用yum命令报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, ...

  8. Java 9 在win10环境搭建

    Java SDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html JA ...

  9. Java反射及注解学习- 反射的使用 - JDK动态代理

    代理模式基本概念:1.代理模式的作用:为其他对象提供一种以控制对方的访问在某种情况下,一个客户不想或者不能直接引用另一个对象,代理可以在客户端和目标对象之间起到中介的作用代理的角色:(1)抽象角色:声 ...

  10. visual studio code的使用

    1.添加代码片段 参考:https://blog.csdn.net/qq_36370731/article/details/83014439 2.在vscode上运行Git 先打开vscode内置的G ...