因为系统的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. 三 Bash Shell 结构

    Bash Shell 程序结构主要有 : 变量设定  内置命令 Shell 语法结构 函数 其他命令行程序构成 例子: [root@localhost ~]# vim test.sh #!/bin/b ...

  2. Flutter日曆國際化

    Flutter自带的日期选择器是showDatePicker,时间选择器是showTimePicker. 这两个选择器默认的显示效果都是英文的,我们是在中国,那么就需要将其显示成中文版的,这就涉及到F ...

  3. 一次Linux服务器空间满的随笔解决记录

    昨天突然无法上传文件到服务器上的,FTP工具总是到99%就卡住了.查了一下说可能是服务器满了. 赶紧用 df -h 命令查看空间使用情况.果然100%了. 想想上次查询才不到50%,怎么突然就满了了呢 ...

  4. Sublime Text 注册及使用相关

    sublime text3 注册码 2019-07-01 注册码可以直接用 地址: 2019-07-01 亲测可用 2019-07-18 亲测可用 -– BEGIN LICENSE -– Die So ...

  5. 【leetcode】1013. Pairs of Songs With Total Durations Divisible by 60

    题目如下: In a list of songs, the i-th song has a duration of time[i] seconds. Return the number of pair ...

  6. 【leetcode】623. Add One Row to Tree

    题目如下: Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with ...

  7. tensorflow函数介绍(1)

    tensorflow中的tensor表示一种数据结构,而flow则表现为一种计算模型,两者合起来就是通过计算图的形式来进行计算表述,其每个计算都是计算图上的一个节点,节点间的边表示了计算之间的依赖关系 ...

  8. Delphi 安装Cnpack cnvcl后界面不断弹出 Memory Manager's list capablity overflow ,please enlarge it!

    Delphi 安装Cnpack cnvcl后界面不断弹出 Memory Manager's list capablity overflow ,please enlarge it! 解决方法:删除指定  ...

  9. C++ 常用数学运算(加减乘除)代码实现 Utils.h, Utils.cpp(有疑问欢迎留言)

    Utils.h #pragma once class Utils { public: static double* array_diff(double*A,double B[],int n); sta ...

  10. 组合的输出(回溯、dfs)

    问题 O: [回溯法]组合的输出 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r<=n),我们可以简单地将n个元素理解为自然数1,2,…,n,从中任取r ...