jQuery 虚拟数字键盘代码
先上效果:
js直接应用: $('input').mynumkb(); 就出来效果
HTML:
<input maxlength="4" type="text" onkeyup="if (this.value==this.value2) return; if (this.value.search(/^\d{0,4}$/)==-1) this.value=(this.value2)?this.value2:'';else this.value2=this.value;" placeholder="请输入正整数" >
CSS:
<style>
.clearfix:after {
visibility: hidden;
display: block;
font-size:;
content: " ";
clear: both;
height:;
}
.mykb-box{
width:390px;
height:370px;
background:rgba(0,0,0,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
box-shadow:0 0 10px rgb(43, 42, 42);
padding:20px;
border-radius:10px;
user-select: none;
-ms-user-select: none;
position:absolute;
display: none;
}
.mykb-box ul,.mykb-box li{
list-style: none;
}
.mykb-box li{
width:70px;
height:70px;
line-height:70px;
text-align: center;
background:#f5f5f5;
border-radius:10px;
font-weight:bold;
margin:10px;
float:left;
box-shadow: 0px 2px 1px #000;
color:#1b50a2;
font-size:24px;
cursor:pointer;
}
.mykb-box li.active{
box-shadow:0px -2px 1px #000;
}
.mykb-box .func{color:#fff;width:100px;}
.mykb-box .exit{background:#F44336;}
.mykb-box .del{background:#ff9800}
.mykb-box .clearall{background:#2196F3}
.mykb-box .sure{background: #4CAF50;width:190px;}
</style>
JS:
/**
* Created by on 2019/7/11.
*
* 数字键盘插件 js
*/ (function($){
var _count = 0;
var Mynumkb = function(element, options){
_count++;
this.count = _count;
this.$element = $(element);
this.$element.attr("data-count",this.count);
this.options = $.extend({},$.fn.mynumkb.defaults, options);
this.init();
}
Mynumkb.prototype = {
constructor: Mynumkb,
init:function(){
var me= this;
me.render();
me.bind();
me.initHtml();
},
render:function(){
var me = this;
me.$eparentNode = me.$element.parent();
},
bind:function(){
var me = this;
me.$element.on("click",$.proxy(me['_eClick'],me)); $(document).on("mousedown","#mykeyboard"+me.count+" li",$.proxy(me['_limousedown'],me));
$(document).on("mouseup","#mykeyboard"+me.count+" li",$.proxy(me['_limouseup'],me));
$(document).on("click","#mykeyboard"+me.count+" li",$.proxy(me['_liclick'],me));
},
initHtml:function(){
var me = this;
var _html = [
'<div class="mykb-box" id="mykeyboard'+me.count+'">',
'<ul class="num-key clearfix">',
'<li class="num">1</li>',
'<li class="num">2</li>',
'<li class="num">3</li>',
'<li class="func exit">退出</li>',
'<li class="num">4</li>',
'<li class="num">5</li>',
'<li class="num">6</li>',
'<li class="func del">退格</li>',
'<li class="num">7</li>',
'<li class="num">8</li>',
'<li class="num">9</li>',
'<li class="func clearall">清除</li>',
'<li class="num">0</li>',
'<li class="num">.</li>',
'<li class="func sure">确定</li>',
'</ul>',
'</div>',
].join(""); $("body").append(_html);
me.setPosition();
},
setPosition:function(){
var me = this;
var parentNode = me.$eparentNode;
var $element = me.$element;
$("body").css("position","relative");
var height = $element.outerHeight();
var width = $element.outerWidth();
var position = $element.position();
var $keyboard = $("#mykeyboard"+me.count);
var ulWidth = $keyboard.outerWidth();
var ulHeight = $keyboard.outerHeight();
var left = position.left;
$keyboard.css({
top:position.top+height+30+"px",
left:left+width+30+"px"
});
},
_eClick:function(e){
var me = this;
var count = me.$element.data("count");
var $keyboard = $("#mykeyboard"+count);
$keyboard.fadeIn(100).siblings(".mykb-box").hide();
},
_liclick:function(e){
var me = this;
var $target = $(e.target);
if($target.hasClass("del")){//退格
me.setValue("del");
}else if($target.hasClass("exit")||$target.hasClass("sure")){//退出--确定
me.close();
}else if($target.hasClass("clearall")){//清除
me.$element.val("");
}else{//输入其他数字
var str = $target.text();
me.setValue("add",str);
}
},
_limousedown:function(e){
var me = this;
var val = $(e.target).html();
$(e.target).addClass("active").siblings().removeClass("active");
},
_limouseup:function(e){
var me = this;
var val = $(e.target).html();
$(e.target).removeClass("active"); },
setValue:function(type,str){
var me = this;
var curpos = me.getCursorPosition();
var val = me.$element.val();
var newstr = "";
if(type == 'add'){
newstr = me.insertstr(val,str,curpos);
me.$element.val(newstr);
me.$element.textFocus(curpos+1);
}else if(type == 'del'){
newstr = me.delstr(val,curpos);
me.$element.val(newstr);
me.$element.textFocus(curpos-1);
} },
insertstr:function(str,insertstr,pos){
var str = str.toString();
var newstr = str.substr(0,pos)+''+insertstr+''+str.substr(pos);
return newstr;
},
delstr:function(str,pos){
var str = str.toString();
var newstr = "";
if(pos != 0){
newstr = str.substr(0,pos-1)+str.substr(pos);
}else{
newstr = str;
}
return newstr;
},
getCursorPosition:function(){
var me = this;
var $element = me.$element[0];
var cursurPosition=-1;
if($element.selectionStart!=undefined && $element.selectionStart!=null){//非IE浏览器
cursurPosition= $element.selectionStart;
}else{//IE
var range = document.selection.createRange();
range.moveStart("character",-$element.value.length);
cursurPosition=range.text.length;
}
return cursurPosition;
},
close:function(){
var me = this;
var count = me.$element.data("count");
var $keyboard = $("#mykeyboard"+count);
$keyboard.fadeOut(100);
me.$element.attr("isshowkb","false");
}
};
$.fn.mynumkb = function (option) {
return this.each(function () {
var options = typeof option == 'object' ? option : {};
var data = new Mynumkb(this, options);
})
}
$.fn.mynumkb.defaults = { };
$.fn.mynumkb.Constructor = Mynumkb; })(jQuery);
(function($){
$.fn.textFocus=function(v){
var range,len,v=v===undefined?0:parseInt(v);
this.each(function(){
if(navigator.userAgent.msie){
range=this.createTextRange();
v===0?range.collapse(false):range.move("character",v);
range.select();
}else{
len=this.value.length;
v===0?this.setSelectionRange(len,len):this.setSelectionRange(v,v);
}
this.focus();
});
return this;
}
})(jQuery);
jQuery 虚拟数字键盘代码的更多相关文章
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
- 基于jQuery的软键盘
基于jQuery的软键盘 前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置 ...
- jQuery动态数字翻滚计数到指定数字的文字特效代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
- 示例:WPF仿制OSK做的系统键盘和数字键盘
原文:示例:WPF仿制OSK做的系统键盘和数字键盘 一.目的:在应用osk.exe系统键盘时遇到很多不方便,比如有些系统调用不出来等问题,由此开发了一个系统键盘仿制osk 二.实现功能 1.目前实现大 ...
- WPF开发经验-实现Win10虚拟触摸键盘
一 引入 项目有个需求,需要实现纯触控操作进行键盘输入.项目部署在Win10系统上,考虑有两种方案来实现. 通过调用Win10自带的触摸键盘来实现: 通过WPF实现一个触摸键盘来实现: 二 调用Win ...
- 手机端访问web调用数字键盘。
转自 http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel", ...
- jQuery用户数字评分效果
效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- iOS数字键盘自定义按键
UIKeyboardTypeNumberPad 数字键盘自定义按键 最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: ...
随机推荐
- wnmp安装配置的坑
1.下载安装nginx: nginx官网下载地址->下载nginx 下载任意版本.我下载的是1.13.12版本,解压到C:\wnmp\nginx(自己决定目录),运行nginx.exe. 访问h ...
- eclipse中不能找到dubbo.xsd
使用dubbo时遇到问题: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document 'htt ...
- bzoj5457
城市 HYSBZ - 5457 有n座城市,m个民族.这些城市之间由n-1条道路连接形成了以城市1为根的有根树.每个城市都是某一民族的聚居 地,Master知道第i个城市的民族是A_i,人数是B_i. ...
- elastic search&logstash&kibana 学习历程(三)Logstash使用场景和安装部署
Logstash基本介绍和使用场景 自我认为:logstash就是日志的采集收集,日志的搬运工,实时去采集日志.读取不同的数据源,并进行过滤,开发者自定义规范输出到目的地.日志的来源很多,如系统日志, ...
- 【MAC工具】手机抓包工具之 —— whistle
本文链接:https://blog.csdn.net/weixin_42534940/article/details/88783455安装参考: https://github.com/avwo/whi ...
- mysql被收购 用mariadb
~]# systemctl start mysql.service 要启动MySQL数据库是却是这样的提示 Failed to start mysqld.service: Unit not found ...
- windos系统下使tomcat按天生成控制台日志catalina.out
windos系统下的tomcat默认不会记录控制台catalina.out日志,只有访问日志,不便于排错 修改启动文件 1.打开bin下面的startup.bat文件,把 call "%EX ...
- 求两个排序数组的交集和并集----时间复杂度O(n+m)
问题: 给你两个排序的数组,求两个数组的交集. 比如: A = 1 3 4 5 7, B = 2 3 5 8 9, 那么交集就是 3 5,n是a数组大小,m是b数组大小. 思路: (1)从b数组遍历取 ...
- CDN之Web Cache
1. Cache 的工作方式 Web Cache 作为一种网页缓存技术,可以在用户访问网站服务器的任何一个中间网元上实现.根据 HTTP 协议的定义,在一次网页访问中,用户从客户端发出请求到网站服务器 ...
- HearthBuddy 复生 reborn
https://hearthstone.gamepedia.com/Reborn Reborn is an ability that causes a minion to be resummoned ...