因为系统的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. 用vbs脚本简易实现 番茄工作法

    番茄工作法: 专注于某一段时间,减少打断,提高时间的感知和掌控. 25min工作+5min休息 周期:4x(25+5)+20 VBS代码实现如下: Dim fso,f,count,time,shell ...

  2. python断言语句assert

    断言语句的格式 assert test, [msg] test是一个表达式,表达式求值为Fals时引发AssertionError异常,msg是可选的异常消息. def test_assert(a): ...

  3. 【串线篇】SQL映射文件-联合查询(完结association+cellection)

    1.级联属性的方式封装查出1-1 查钥匙的时候顺别把对应的级联的那把锁也查出来 1).两个JavaBean,Key里有对应的Lock(private Lock lock;//当前钥匙能开哪个锁:) 2 ...

  4. 第二节:链接mongodb服务器

    查看mongodb的使用说明 版本是3.6.0 options 选项 指的是用户名和密码 address 数据库地址  数据库格式是 ip:端口/数据库 192.168.0.5:999/foo 链接本 ...

  5. 插入排序->希尔排序

    /** * 插入排序 */ public class InsertSort { public static void main(String[] args){ int[] arr = {5,5,2,6 ...

  6. mysql 生成max+1编号

    #sql info表插入一条数据,number字段根据info表最大number+1插入,若为初始插入,number为100000#在获取本表number最大值时,mysql不允许直接查询本表获取最大 ...

  7. 在项目中使用 Maven 私服

    #在项目中使用 Maven 私服 在 Maven settings.xml 中添加 Nexus 认证信息(servers 节点下): <server> <id>nexus-re ...

  8. SQL Server 创建表

    SQL Server 创建表 我们在上一节中完成了数据库的创建,在本节,我们要往这个新的数据库中加入点数据,要想将数据添加到数据库,我们就必须在数据库中添加一个表,接下来来看看具体的操作. 我们的数据 ...

  9. windows下用VMware虚拟机下安装Linux CentOS6.9图文教程

    首先,请在Windows7下安装VMware虚拟机,这个比较简单,直接从官网下载安装即可,这里不再叙述. 接着,从官网直接下载CentOS6.9的iso镜像文件,地址:https://www.cent ...

  10. LOJ 2302 「NOI2017」整数——压位线段树

    题目:https://loj.ac/problem/2302 压30位,a最多落在两个位置上,拆成两次操作. 该位置加了 a 之后,如果要进位或者借位,查询一下连续一段 0 / 1 ,修改掉,再在含有 ...