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);
number框的更多相关文章
- 解决Input number 框能够能够输入eeeeee 的问题
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 在input type="n ...
- HTML5 number类型文本框step属性的验证机制——张鑫旭
我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
- Javascript - ExtJs - Ext.form.Panel组件
FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...
- h5 input 的验证
<input type="text" id="a" required/> <input type="text" id=&q ...
- 20145306 网路攻防 web安全基础实践
20145306 网络攻防 web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Reflected XSS At ...
- javascript弹出框打印某个数值时,弹出NaN?(not a number)
一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...
- js值类型转换(boolean/String/number),js运算符,if条件,循环结构,函数,三种弹出框
js值类型转换 number | string | boolean boolean类型转换 num = 0; var b1 = Boolean(num); console.log(b1) 转化为数字类 ...
- element select下拉框绑定number类型
vue 开发中element-ui库的switch开关绑定number类型数据不成功问题 解决方法
随机推荐
- Nginx学习总结:常用module(二)
斜体下划线,表示建议采用默认配置,无需显式的配置 一.ngx_core_module 1.accept_mutex [on | off] 上下文:events 默认为“on”,在wor ...
- maven多模块
https://www.cnblogs.com/lichking2017/p/8996939.html
- jenkins 更改端口
方法一 在Jenkins目录下,运行一下命令: java -jar jenkins.war --ajp13Port=-1 --httpPort=8081 出现了错误: C:\Program Files ...
- java生成快递单并调用打印机打印
生成快递单过程中需要生成条形码,生成条形码可参考:https://www.cnblogs.com/linbky/p/12091248.html 下面这段代码生成的快递单是完全符合京东快递的10 x 1 ...
- boost bimap
The library Boost.Bimap is based on Boost.MultiIndex and provides a container that can be used immed ...
- flask02
-web框架 -从浏览器输入一个地址,发送请求,经历了哪些过程 -反向代理,正向代理 -正向代理代理客户 -反向代理代理服务器-你用过的python中的魔法方法:https://www.cnblogs ...
- 【HDOJ6611】K Subsequence(费用流)
题意:给定一个长为n的正整数序列,要求从中取出至多k个不下降序列,使得它们的和最大,求这个和 n<=2e3,k<=10,a[i]<=1e5 思路:极其考验模板,反正我的spfa和zk ...
- Shorten IPv6 Address
题目链接 题意:转换一个128位的二进制串,变成16进制,并且格式为x:x:x:x:x:x:x:x然后多个相邻的0变成::,且只有一个::,求变成的字典序最小且最短的字符串. 思路:大水题,但是就是一 ...
- AcWing 252. 树 (点分治)打卡
题目:https://www.acwing.com/problem/content/254/ 题意:求一棵树上,路径<=k的有多少条 思路:点分治,我们用两个指针算solve函数,首先对算出来的 ...
- UIStakView的添加与移除
subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...