因为系统的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. java类使用

    package java04; /* * 通常情况下,一个类不能直接使用,需要创建一个对象,才能使用 * *步骤: * 1.导包:就是指出需要使用的类在什么位置 * import 包名称.类名称: * ...

  2. MySQL优化系列之一

    MySQL数据库常见的两个瓶颈是CPU和I/O. CPU在饱和的情况下一般发生在数据装入内存或者从磁盘上读取数据的时候,当装入的数据远大于 内存容量的时候,这时可能会发生I/O瓶颈, 如果是分布式应用 ...

  3. Java使用文件通道复制文件

    两种文件通道复制文件方式的性能比较 import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IO ...

  4. 如何使用Excel绘制甘特图

    摘自:http://www.mifengtd.cn/articles/how-to-create-a-gantt-chart-in-excel.html 再造<优秀的时间管理和项目管理工具> ...

  5. springboot 操作redis

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  6. python 爬取<a>标签内href的方法及遇到的问题

    原博客地址: https://www.cnblogs.com/dengyg200891/p/6060010.html # -*- coding:utf-8 -*- #python 2.7 #XiaoD ...

  7. Ext js-01 -helloworld

    一.下载ext: 登陆这个网址  https://www.sencha.com/products/evaluate/ 下载下来解压后如下:安装cmd程序 二.开始helloworld 新建一个idea ...

  8. 威胁预警|Solr velocity模板注入远程命令执行已加入watchbog武器库,漏洞修补时间窗口越来越短

    概述 近日,阿里云安全团队监测到挖矿团伙watchbog更新了其使用的武器库,增加了最新Solr Velocity 模板注入远程命令执行漏洞的攻击方式,攻击成功后会下载门罗币挖矿程序进行牟利.建议用户 ...

  9. StatefulWidget 有状态组件

    在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget: StatelessWidget 是无状态组件,状态不可变的 widget ...

  10. linux设备驱动第一篇:设备驱动程序简介

    首先,我们知道驱动是内核的一部分,那么驱动在内核中到底扮演了什么角色呢? 设备驱动程序在内核中的角色:他们是一个个独立的“黑盒子”,使某个特定的硬件响应一个定义良好的内部编程接口,这些接口完全隐藏了设 ...