根據上上篇的鍵盤ui界面我添加了一個輸入框讓鍵盤有了輸入效果如下
界面代碼可以去上上篇看： https://www.cnblogs.com/2979100039-qq-con/p/12641603.html
這那個代碼基礎上加了一個輸入框，在把鍵盤縮放0.7倍就可以了
接下重點是js代碼同樣用的是jquery寫的需要到jq框架
jquery代碼很簡單只是一些點擊事件和獲取改變輸入框的value值來進行輸入效果
$(function(){
/* 點擊鍵盤賦值 */
function chagekey(btn){
var inp_value = https://www.cnblogs.com/2979100039-qq-con/p/$("#inp").val();
var t = btn.html();
var map = inp_value+t;
$("#inp").attr("value",map);
}
/* 鍵盤移動方法*/
$(".f_div").mousedown(function(event){
var staetX = event.pageX-$(this).offset().left;
var staetY = event.pageY-$(this).offset().top;
$(this).mousemove(function(event){
var x = event.pageX - staetX;
var y = event.pageY - staetY;
$(this).offset({left:x,top:y});
});
}).mouseup(function(){
$(this).off("mousemove");
});
/* 選中輸入框鍵盤出現 */
$("#inp").on("click",function(){
var input = $(this);
$(".f_div").show();
/* 獲取按鈕索引來排除無法輸入的按鈕 */
var jpnub = $("#s_div button").length;
$("#s_div button").unbind("click");
var xfkb_text = input.val(); //獲取input框當前的val值
$("#s_div button").click(function () {
var click = $(this).html();
var butindex = $(this).index(); //獲取點擊按鍵的內容
//特殊按鍵在這添加事件
//判斷點擊的按鍵是否有特殊事件，如果沒有則按鍵內容加在input文本后面
if (butindex == 14 || butindex == 28 || butindex == 41 || butindex == 55||
butindex == 52 || butindex == 53 || butindex == 54 || butindex == 59||
butindex == 57 || butindex == 58 || butindex == 59 || butindex == 60 ) {
}else if(butindex == 56){
xfkb_text = xfkb_text + " ";
input.val(xfkb_text);
}else if(butindex == 13){
xfkb_text = "";
input.val(xfkb_text);
}else if(butindex == 40){
$(".f_div").hide();
}else {
xfkb_text = xfkb_text + click;
input.val(xfkb_text);
}
input.focus();
});
/* 按capslk大小寫切換 */
var t = 0;
$("#toggle_case").click(function(){
if(t == 0){
t=1;
$.each($("#s_div button"), function(b, c) {
$(c).text($(c).text().toLowerCase());
});
}else{
t=0;
$.each($("#s_div button"), function(b, c) {
$(c).text($(c).text().toUpperCase());
});
}
});
});
});
后面還會繼續優化這個鍵盤，當我學到了東西優化
在寫這個的時候我看了好多個版本的案例，最后寫成了這個樣子，雖然寫完后簡單，但每次遇到一些自己沒有接觸過的知識
總要去了解，去搞清楚比如這個聚焦input.focus();知識總是一點點的積累，當你動手時，不管你會還是不會，你就成功了一半了
一個新手，代碼不足之處可以指出QAQ謝謝
我來更新我的小鍵盤了QAQ
在學習的程序中，我接觸到了一個事件 trigger() 在老師的點醒之下我就使用了這個事件來完善了我的鍵盤
首先我給每一個button按鈕添加了與之按鍵對應的value值（值是鍵盤按鍵的ASCII碼）如下：
<body onkeydown="key()"> <script src="https://www.cnblogs.com/2979100039-qq-con/p/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.cnblogs.com/2979100039-qq-con/p/js/keyboard.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/2979100039-qq-con/p/css/keyboard01.css"/> <h3>點擊選項框</h3> <input type="text" id="inp"/> <div > <div id="s_div"> <!-- 第一排 --> <button value="https://www.cnblogs.com/2979100039-qq-con/p/192">~</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/49">1</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/50">2</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/51">3</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/52">4</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/53">5</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/54">6</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/55">7</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/56">8</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/57">9</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/48">0</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/189">-</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/187">+</button> <button style="width: 134px;" value="https://www.cnblogs.com/2979100039-qq-con/p/8">Delete</button> <!-- 第二排 --> <button style="width: 98px;" value="https://www.cnblogs.com/2979100039-qq-con/p/9">Tab</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/81">Q</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/87">W</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/69">E</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/82">R</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/84">T</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/89">Y</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/85">U</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/73">I</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/79">O</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/80">P</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/219">[</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/221">]</button> <button style="width:98px;" value="https://www.cnblogs.com/2979100039-qq-con/p/220">\</button> <!-- 第三排 --> <button style="width: 134px;" id="toggle_case" value="https://www.cnblogs.com/2979100039-qq-con/p/20">CapsLk</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/65">A</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/83">S</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/68">D</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/70">F</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/71">G</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/72">H</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/74">J</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/75">K</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/76">L</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/186">;</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/222">'</button> <button style="width:134px;" value="https://www.cnblogs.com/2979100039-qq-con/p/13">Enter</button> <!-- 第四排 --> <button style="width: 170px;" value="https://www.cnblogs.com/2979100039-qq-con/p/16">Shift</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/90">Z</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/88">X</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/67">C</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/86">V</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/66">B</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/78">N</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/77">M</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/188">,</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/190">.</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/191">/</button> <button style="width:170px;" value="https://www.cnblogs.com/2979100039-qq-con/p/11111">Shift</button> <!-- 第五排 --> <button style="width: 98px;" value="https://www.cnblogs.com/2979100039-qq-con/p/17">Ctrl</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/91">Win</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/18">Alt</button> <button style="width: 450px;" value="https://www.cnblogs.com/2979100039-qq-con/p/32">span</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/1111">Fn</button> <button value="https://www.cnblogs.com/2979100039-qq-con/p/1112">ray</button> <button style=" width: 103px;" value="https://www.cnblogs.com/2979100039-qq-con/p/93">Command</button> <button style="width: 98px;" value="https://www.cnblogs.com/2979100039-qq-con/p/11111">Ctrl</button> </div> </div> </body>
這個方法是不是看著很蠢，其實我個人也是這樣子覺得（但是技術有限，流下了沒有技術的淚水）
然后當觸發鍵盤事件是，獲取鍵盤按鍵的ASCII碼和button的value值做出判斷，如果相等則使用trigger() 來觸發這個按鈕的點擊事件，從而達到鍵盤點擊的效果
js代碼如下：
/* 系結鍵盤 上面的是虛擬鍵盤 */
$("body").keydown(function(e){
var but1 = $("#s_div button");//獲取s_div下的所以button標簽
var key1 = e.keyCode; //獲取按鍵盤的ASCII碼
for (var i = 0; i < but1.length; i++) { //遍歷button按鈕
/* console.log(but1[i].value); */
if(but1[i].value =https://www.cnblogs.com/2979100039-qq-con/p/= (key1)){ //如果按鈕的value值等于按鍵的ASCII值 改變按樣式, 讓這個按鈕執行點擊事件
$("#s_div button:eq("+i+")").addClass("Labutcss").siblings().removeClass("Labutcss");
$("#s_div button:eq("+i+")").trigger("click");
}
}
});
由于點擊鍵盤時會觸發電腦自身的輸入法，所以在輸入是會有錯誤，此時就會想到怎么去屏蔽輸入法 如下：
/* 屏蔽系統鍵盤按鍵 */
function key(){
if(event.keyCode<255){
event.returnValue = https://www.cnblogs.com/2979100039-qq-con/p/false;
}
}
然后還添加了一個定時器，用來模擬按鍵的點擊效果，讓每次點擊過500毫秒后清除點擊樣式，這樣就可以實作點擊按鈕高光，高光又不會一直存在的情況如下：
/* 清除鍵盤點擊樣式 */
var clearstyle = function clearstyle(){
$("#s_div button").removeClass("Labutcss");
}
就是這個樣子，更新完成后就可以實作鍵盤的點擊輸入（但是只能在英文狀態下，中文就打字了你懂的，此刻我留下了沒有技術的淚水QAQ）
效果圖和原始碼等我上傳成功后再補上來，后續在更新
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2394.html
標籤：jQuery
上一篇：Jquery訊息滾動