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类型数据不成功问题 解决方法
随机推荐
- Git--08 Jenkins
目录 Jenkins 01. 安装准备 02 .安装Jdk和Jenkins 03 .配置Jenkins 04. 插件安装 05. 创建项目 06. Jenkins获取Git源代码 07. 立即构建获取 ...
- cookie和session的联系与区别
Cookie 当你在浏览网站时,WEB服务器会先送一小小的资料放在你的计算机上,Cookie会帮你在网站上所打的文字或是一些选择都记录下来.当你下次再光临同一个网站时,WEB服务器会先看看有没有它上次 ...
- HTML基础 内联样式改进 三毛语录
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ASP.NET Core中的依赖注入: 构造函数的选择与服务生命周期管理
ServiceProvider最终提供的服务实例都是根据对应的ServiceDescriptor创建的,对于一个具体的ServiceDescriptor对象来说,如果它的ImplementationI ...
- MySQL Authentication plugin 'caching_sha2_password' cannot be loaded
很多用户在使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin 'caching_sha2_password' cannot be loade ...
- 1.xml简单介绍
1.xml(eXtensible Markup Language)的简介 (1)xml: 可扩展标记型语言 - 标记型语言:例如html也是标记型语言,也是使用标签来操作的 - 可扩展:html里面的 ...
- autoit3 脚本自动安装实例
软件自动安装的相关实例!贴出来用于参考,并部分相关语法与示例 #RequireAdmin If DriveMapGet("T:")=="" Then Drive ...
- MySQL索引优化之双表示例
select * from tableA a left join tableB b on a.f_id = b.id; 索引建tableB表上面, 因为left join 注定左表全都有,所以应该关心 ...
- Java反射学习-1 - 反射获取类的属性,方法,构造器
新建一个Person类 package cn.tx.reflect; /** * 注解初步了解 * @author Administrator * */ public class Person { p ...
- Python 中内建属性 __getattribute__
参考自:https://blog.csdn.net/yitiaodashu/article/details/78974596 __getattribute__是属性访问拦截器,就是当这个类的属性被访问 ...