基於jQuery的數字鍵盤插件
有時，咱們須要在網頁上使用軟鍵盤。今天，就給你們帶來一個基於jQuery的數字鍵盤插件，除了jQuery，不須要依賴任何文件資源。純數字鍵盤，有退格，有清除，不支持輸入小數(須要的能夠本身改一下，主要是多個小數點就有13個鍵，很差排列了，呵呵)。支持鼠標拖動和觸摸拖動，可關閉。css
在線演示html
1.頁面代碼web
<ul> <li><input type="text" placeholder="手機號碼後四位" id="numkeyboard1" class="numkeyboard" /></li> <li><input type="text" placeholder="開箱密碼" id="numkeyboard2" class="numkeyboard"/></li> <button type="submit" class="numkeyboard" value="querun">確 認</button> </ul>
很簡單吧，下面看看調用app
$(".numkeyboard").numkeyboard({
keyboardRadix:1000,//鍵盤大小基數
mainbackground:'#C8BFE7', //主背景色
menubackground:'#4A81B0', //頭背景色
exitbackground:'#4376A0', //關閉按鈕背景色
buttonbackground:'#ff730e', //鍵盤背景色
clickeve:true//是否綁定元素click事件
});
效果截圖：dom
參數說明：keyboardRadix：設置鍵盤大小，默認1000。當值爲1000時，實際大小爲600X500。keyboardRadix最小爲300；clickeve：設置是否綁定元素的click事件，若是爲true，則綁定click事件，即單擊click時也能夠達到onfocus的效果。默認只綁定元素的onfocus事件。this
爲了使用簡單，因此css樣式控制純由js完成，美觀上就不能強求了。若是要想漂亮，建議用css控制樣式，js操做樣式太蛋疼了。這是我之前看到過的一個純CSS3鍵盤，你們能夠看看，很漂亮的，有須要的能夠參照一下。源代碼查看spa
2.js代碼插件
/*
* numkeyboard 1.0
* Copyright (c) 2014 BowenLuo http://www.luobo.com/
* Date: 2014-06-08
* Example:$(".numkeyboard").numkeyboard();
*/
(function($){
$.fn.numkeyboard = function(options){
var defaults = {
keyboardRadix:1000,//鍵盤大小基數
mainbackground:'#C8BFE7', //主背景色
menubackground:'#4A81B0', //頭背景色
exitbackground:'#4376A0', //關閉按鈕背景色
buttonbackground:'#ff730e', //鍵盤按鈕背景色
clickeve:false//是否綁定元素click事件
}
var options = $.extend(defaults, options);
var keyboardRadix = options.keyboardRadix;
if(keyboardRadix<300){
keyboardRadix=300;
}
var numkeyboardcount = 0;
var activeinputele;
this.each(function(){
numkeyboardcount++;
//添加惟一的數字鍵盤
if(numkeyboardcount<2){
keyBoardId = randomOnlyId();
$("body").append("<div id='"+keyBoardId+"' class='auth_keybord'>"
+"<div id='auth_keybord_exit' class='auth_keybord_exit'>關閉</div>"
+"<div id='auth_keybord_menu' class='auth_keybord_menu'></div>"
+"<ul class='number_list' id='number_list'>"
+"<li><button type='button'>7</button></li>"
+"<li><button type='button'>8</button></li>"
+"<li><button type='button'>9</button></li>"
+"<li><button type='button'>4</button></li>"
+"<li><button type='button'>5</button></li>"
+"<li><button type='button'>6</button></li>"
+"<li><button type='button'>1</button></li>"
+"<li><button type='button'>2</button></li>"
+"<li><button type='button'>3</button></li>"
+"<li><button type='button'>0</button></li>"
+"<li><button type='submit'>清除</button></li>"
+"<li><button type='submit'>退格</button></li>"
+"</ul></div>");
}
//元素選擇器
var inputele = $(this);
var keyboard = $("#"+keyBoardId+"");
var keyboard_exit = keyboard.children('div:first');
var keyboard_menu = keyboard.children('div:eq(1)');
var keyboard_buttonul = keyboard.find('ul:first');
var keyboard_buttonli = keyboard_buttonul.children('li');
var keyboard_button = keyboard_buttonli.children('button');
//元素css樣式控制
keyboard.css({"position":"absolute","z-index":"10","display":"none","background":options.mainbackground,overflow:"hidden",
"width":keyboardRadix*0.6,"height":keyboardRadix*0.5,"border-radius":keyboardRadix*0.01});
keyboard_exit.css({"position":"absolute","z-index":"1","right":"0","background":options.exitbackground,"cursor":"pointer","text-align":"center",
"width":keyboardRadix*0.16,"height":keyboardRadix*0.081,"border-top-right-radius":keyboardRadix*0.01,"line-height":keyboardRadix*0.081+"px",
"font-family":"'微軟雅黑',arial","font-size":keyboardRadix*0.036+"px","corlor":"#000","letter-spacing":keyboardRadix*0.005});
keyboard_menu.css({position:"relative",background:options.menubackground,cursor:"move",margin:"auto",
width:keyboardRadix*0.6,height:keyboardRadix*0.081,"border-top-left-radius":keyboardRadix*0.01,"border-top-right-radius":keyboardRadix*0.01});
keyboard_buttonul.css({position:"relative",margin:"auto","margin-top":keyboardRadix*0.03+"px",width:keyboardRadix*0.54,height:keyboardRadix*0.37});
keyboard_buttonli.css({position:"relative",margin:"auto",overflow:"hidden","float":"left",width:keyboardRadix*0.18,height:keyboardRadix*0.09});
var buttonborder = String(keyboardRadix*0.001+"px solid "+options.buttonbackground);
keyboard_button.css({"position":"relative","float":"left", padding: "0","cursor":"pointer","background":options.buttonbackground,"text-align":"center",
"width":keyboardRadix*0.16,"height":keyboardRadix*0.08,"border-radius":keyboardRadix*0.004,border:buttonborder,
"line-height":keyboardRadix*0.08+"px",margin:"0 0 0 "+keyboardRadix*0.01+"px",
"font-family":"'微軟雅黑',arial","font-size":keyboardRadix*0.032+"px","color":"#fff"});
keyboard_button.mousedown(function(event){
$(this).css({background:"#666",top:"2px"});
event.preventDefault();
}).mouseup(function(){
$(this).css({background:options.buttonbackground,top:"0"});
});
keyboard_exit.click(function(){
exit(options.clickeve);
});
inputele.focus(function(event){
activeinputele = $(this);
var p = GetScreenPosition(this);
if(keyboard.css("display")=="none"){
keyboard.css({"display":"block","left":p.x,"top":p.y+$(this).height()*1.2});
mouseDrag();
touchDrag();
}});
if(options.clickeve){
inputele.click(function(){
activeinputele = $(this);
var p = GetScreenPosition(this);
if(keyboard.css("display")=="none"){
keyboard.css({"display":"block","left":p.x,"top":p.y+$(this).height()*1.2});
mouseDrag();
touchDrag();
}});
}
if(numkeyboardcount<2){
for(var i=0;i<keyboard_button.length;i++){
numbuttonclick(i);
}
}
function randomOnlyId(){
var tempRandom = String(Date.now());
var tempRandomLength = tempRandom.length;
tempRandom = tempRandom.substring(tempRandomLength-5,tempRandomLength-1);
var randomId = "auth_keybord"+tempRandom;
if($("#randomId").length>0){
randomOnlyId()
}else{
return randomId;
}
}
function getElem(id) {
return document.getElementById(id);
}
function numbuttonclick(buttonnum){
keyboard_buttonli.children('button:eq('+buttonnum+')').click(function(e){
var buttontext = keyboard_buttonli.children('button:eq('+buttonnum+')').text();
if(buttontext/1){
clickkey(buttontext/1);
}else{
if(buttontext=="0"){
clickkey(0);
}
if(buttontext=="退格"){
backspace();
}
if(buttontext=="清除"){
keyclear();
}
}
})
}
function keyclear(){
activeinputele.val("");
}
function backspace(){
var inputtext = activeinputele.val();
if(inputtext.length>0){
inputtext = inputtext.substring(0,inputtext.length-1);
activeinputele.val(inputtext);
}
}
function clickkey(num){
var inputtext = activeinputele.val();
inputtext = inputtext+num;
activeinputele.val(inputtext);
}
function exit(){
keyboard.css({"display":"none"});
}
function GetScreenPosition(object) {
var position = {};
position.x = object.offsetLeft;
position.y = object.offsetTop;
while (object.offsetParent) {
position.x = position.x + object.offsetParent.offsetLeft;
position.y = position.y + object.offsetParent.offsetTop;
if (object == document.getElementsByTagName("body")[0]) {
break;
}
else{
object = object.offsetParent;
}
}
return position;
}
function mouseDrag() {
var moveEle = keyboard;
var eventEle = keyboard_menu;
var stx = etx = curX = sty = ety = curY = 0;
var MAction = false;
var eleLeft = +moveEle.css("left").split('px')[0];
var eleTop = +moveEle.css("top").split('px')[0];
eventEle.mousedown(function(event){
MAction = true;
stx = event.pageX;
sty = event.pageY;
eleLeft = +moveEle.css("left").split('px')[0];
eleTop = +moveEle.css("top").split('px')[0];
event.preventDefault();
}).mousemove(function(event){
if(MAction){
var curX = event.pageX-stx;
var curY = event.pageY-sty;
moveEle.css({"left":eleLeft+curX,"top":eleTop+curY});
event.preventDefault();
}});
$("body").mouseup(function(event){
stx = etx = curX = sty = ety = curY = 0;
MAction = false;
});
}
function touchDrag() {
var moveEle = keyboard;
var eventEle = keyboard_menu;
var stx = sty = etx = ety = curX = curY = 0;
var TAction = false;
var eleLeft = +moveEle.css("left").split('px')[0];
var eleTop = +moveEle.css("top").split('px')[0];
eventEle.on("touchstart", function(event) { //touchstart
var event = event.originalEvent;
TAction = true;
curX = curY = 0;
// 元素當前位置
eleLeft = +moveEle.css("left").split('px')[0];
eleTop = +moveEle.css("top").split('px')[0];
// 手指位置
stx = event.touches[0].pageX;
sty = event.touches[0].pageY;
});
eventEle.on("touchmove", function(event) {
if(TAction){
var event = event.originalEvent;
event.preventDefault();
curX = event.touches[0].pageX - stx;
curY = event.touches[0].pageY - sty;
//alert(eleLeft+"-"+gundongX);
moveEle.css({"left":eleLeft+curX,"top":eleTop+curY});
}
});
eventEle.on("touchend", function(event) {
stx = etx = curX = sty = ety = curY = 0;
MAction = false;
});
function getT3d(elem, ename) {
var elem = elem[0];
var str1 = elem.style.webkitTransform;
if (str1 == "") return "0";
str1 = str1.replace("translate3d(", "");
str1 = str1.replace(")", "");
var carr = str1.split(",");
if (ename == "x") return carr[0];
else if (ename == "y") return carr[1];
else if (ename == "z") return carr[2];
else return "";
}
}
});
};
})(jQuery);
相關文章
- 1. 基於jQuery的數字鍵盤插件
- 2. 基於 jQuery 的鍵盤事件監聽控件
- 3. jQuery 鍵盤事件
- 4. jQuery鍵盤事件
- 5. 鍵盤事件（jQuery）
- 6. jQuery數字加減插件
- 7. 基於jQuery的emoji表情插件
- 8. 兩款基於Jquery的圖表插件
- 9. 基於jQuery的email suggest插件
- 10. jquery鍵盤常見事件
- 更多相關文章...
- • SQLite Distinct 關鍵字 - SQLite教程
- • Maven 插件 - Maven教程
- • ☆基於Java Instrument的Agent實現
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於jQuery的數字鍵盤插件
- 2. 基於 jQuery 的鍵盤事件監聽控件
- 3. jQuery 鍵盤事件
- 4. jQuery鍵盤事件
- 5. 鍵盤事件（jQuery）
- 6. jQuery數字加減插件
- 7. 基於jQuery的emoji表情插件
- 8. 兩款基於Jquery的圖表插件
- 9. 基於jQuery的email suggest插件
- 10. jquery鍵盤常見事件