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类型数据不成功问题 解决方法
随机推荐
- 一、RabbitMQ安装与测试连接
一.下载NuGet支持的RabbitMQ.Client客户端库与安装RabbitMQ服务. 1.安装客户端库操作服务. 2.安装服务. 步骤一.下载Erlang. 步骤二.下载RabbitMQ服务 采 ...
- go语言从例子开始之Example30.通道遍历
在前面的例子中,我们讲过 for 和 range为基本的数据结构提供了迭代的功能.我们也可以使用这个语法来遍历从通道中取得的值 Example: package main import "f ...
- JVM参数说明
转载于https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html文章 JVM参数说明 -Xms:初始堆大小 默认值=物理内存的1 ...
- 设置intellij IDEA编辑框背景色
首先是打开idea开发工具,然后点击左上角的File,选择Settings设置 应用即时生效,无需重启idea
- golang web
最简web package main import ( "io" "net/http" "log" ) func HelloServer(w ...
- Scene Text Detection(场景文本检测)论文思路总结
任意角度的场景文本检测论文思路总结共同点:重新添加分支的创新更突出场景文本检测基于分割的检测方法 spcnet(mask_rcnn+tcm+rescore) psenet(渐进扩展) mask tex ...
- Cytoscape基础教程笔记
昨天开始学用Cytoscape,其tutorial分为两个部分,基础的和高级 的.基础教程又分成了四课:Getting Started.Filters & Editor.Fetching Ex ...
- Vue.js----router(路由)
什么是路由? 路由可看做是一个键值对,K-V. K => path()路径地址 V=> 处理请求的回调函数 前台路由 K => path()路径地址 V=> 路由组件 编写使用 ...
- 【Http2.0】Http2.0
序言 目前HTTP/2.0(简称h2)已经在广泛使用(截止2018年8月根据Alexa流行度排名的头部1千万网站中,h2占比约29%,https://w3techs.com/technologies/ ...
- LOJ 3090 「BJOI2019」勘破神机——斯特林数+递推式求通项+扩域
题目:https://loj.ac/problem/3090 题解:https://www.luogu.org/blog/rqy/solution-p5320 1.用斯特林数把下降幂化为普通的幂次求和 ...