基於jQuery的數字鍵盤外掛程式

有時，我們需要在網頁上使用軟鍵盤。今天，就給大家帶來乙個基於jquery的數字鍵盤外掛程式，除了jquery，不需要依賴任何檔案資源。純數字鍵盤，有退格，有清除，不支援輸入小數(需要的可以自己改一下，主要是多個小數點就有13個鍵，不好排列了，呵呵)。支援滑鼠拖動和觸控拖動，可關閉。

1.頁面**

<

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>

$(".numkeyboard").numkeyboard();

引數說明：keyboardradix：設定鍵盤大小，預設1000。當值為1000時，實際大小為600x500。keyboardradix最小為300；clickeve：設定是否繫結元素的click事件，如果為true，則繫結click事件，即單擊click時也可以達到onfocus的效果。預設只繫結元素的onfocus事件。

為了使用簡單，所以css樣式控制純由js完成，美觀上就不能強求了。如果要想漂亮，建議用css控制樣式，js操作樣式太蛋疼了。這是我以前看到過的乙個純css3鍵盤，大家可以看看，很漂亮的，有需要的可以參照一下。源**檢視

2.js**

1/*2

* numkeyboard 1.0 34
* date: 2014-06-08
5*    example:$(".numkeyboard").numkeyboard();6*/
7 (function
($) 
17var options =$.extend(defaults, options); 
18var keyboardradix =options.keyboardradix;
19if(keyboardradix<300)
22var numkeyboardcount = 0;
23var
activeinputele;
24this.each(function
()    
47//
元素選擇器
48var inputele = $(this
);49
var keyboard = $("#"+keyboardid+"");
50var keyboard_exit = keyboard.children('div:first');
51var keyboard_menu = keyboard.children('div:eq(1)');
52var keyboard_buttonul = keyboard.find('ul:first');
53var keyboard_buttonli = keyboard_buttonul.children('li');
54var keyboard_button = keyboard_buttonli.children('button');
55//
元素css樣式控制
56     keyboard.css();
58     keyboard_exit.css();
61     keyboard_menu.css();
63     keyboard_buttonul.css();
64     keyboard_buttonli.css();
65var buttonborder = string(keyboardradix*0.001+"px solid "+options.buttonbackground);
66     keyboard_button.css();
70     keyboard_button.mousedown(function
(event));
72event.preventdefault();
73     }).mouseup(function
());
75});
7677     keyboard_exit.click(function
());    
80     inputele.focus(function
(event));
85mousedrag();
86touchdrag();
87}});
8889
if(options.clickeve));
95mousedrag();
96touchdrag();
97}});
98}    
99if(numkeyboardcount<2)
103}        
104function
randomonlyid()else
114}
115116
function
getelem(id) 
119120
function
numbuttonclick(buttonnum)else
130if(buttontext=="退格")
133if(buttontext=="清除")
136}                
137})
138}
139140
function
keyclear()
143function
backspace()    
149}    
150function
clickkey(num)    
155156
function
exit());
158}
159160
function
getscreenposition(object) ;            
162         position.x =object.offsetleft;
163         position.y =object.offsettop;
164while
(object.offsetparent) 
170else
173}
174return
position;
175}
176177
function
mousedrag() ).mousemove(function
(event));
196event.preventdefault();
197}});
198         $("body").mouseup(function
(event));
203}
204205
function
touchdrag() );
224         eventele.on("touchmove", function
(event) );
232}
233234
});235         eventele.on("touchend", function
(event) );
240241
function
gett3d(elem, ename) 
254}
255}); 
256}; 
257 })(jquery);

今天先寫這麼多，有時間接著寫實現過程。　

移動端調起數字鍵盤的問題

在做移動端調起數字鍵盤的時候，碰到了不少的問題，在網上找到了方案，但是卻不符合我的要求的，現在總結下 1.使用input type為number的型別，這種確實可以調起數字鍵盤，但是存在以下問題，會忽略掉點 這樣會導致正則無法匹配的問題，另外我在v model中繫結的值被清空了，但是無法修改檢視，修...

ThinkPad 如何啟用 禁用內嵌數字鍵盤

今天幫leo裝系統時，在登入介面時，輸入密碼時發現無法登入，發現在執行xp時，已經自動啟動ibm內嵌數字鍵盤，也就是說，輸入的並非字母，而是數字！僅內嵌數字鍵盤位置的字母 造成了無法登入，同時一直無法知道如何禁用它，在網上找到了答案！thinkpad 如何啟用 禁用內嵌數字鍵盤 適用機型 所有膝上型...

ubuntu 10 10 數字鍵盤無法使用

不知道怎麼會事，系統的數字鍵盤突然不能用了，只有按enter的時候才有用google了一下，看到這樣子可以解決 按 ctrl shift numlock 即可切換 數字 滑鼠 模式，也就說這個時候數字鍵盤可以做為滑鼠來操作了。具體內容如下 選滑鼠左鍵 選滑鼠右鍵 注意，是 選 單擊 5 雙擊 拖曳 ...