Jquery鍵盤輸入

時間 2020-05-06

標籤 jquery 鍵盤輸入欄目 JQuery 简体版

原文原文鏈接

根據上上篇的鍵盤ui界面我添加了一個輸入框讓鍵盤有了輸入效果以下javascript

界面代碼能夠去上上篇看： https://www.cnblogs.com/2979100039-qq-con/p/12641603.htmlcss

這那個代碼基礎上加了一個輸入框，在把鍵盤縮放0.7倍就能夠了html

接下重點是js代碼一樣用的是jquery寫的須要到jq框架java

jquery代碼很簡單只是一些點擊事件和獲取改變輸入框的value值來進行輸入效果jquery

$(function(){
/* 點擊鍵盤賦值 */
function chagekey(btn){
var inp_value = $("#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");框架

　後面還會繼續優化這個鍵盤，當我學到了東西優化學習

在寫這個的時候我看了好多個版本的案例，最後寫成了這個樣子，雖然寫完後簡單，但每次遇到一些本身沒有接觸過的知識優化

總要去了解，去搞清楚好比這個聚焦input.focus();知識老是一點點的積累，當你動手時，無論你會仍是不會，你就成功了一半了 ui

一個新手，代碼不足之處能夠指出QAQ謝謝

我來更新個人小鍵盤了QAQ

在學習的過程當中，我接觸到了一個事件 trigger() 在老師的點醒之下我就使用了這個事件來完善了個人鍵盤

首先我給每個button按鈕添加了與之按鍵對應的value值（值是鍵盤按鍵的ASCII碼）以下：

<body onkeydown="key()">
		<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/keyboard.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/keyboard01.css"/>
		<h3>點擊選項框</h3>
		<input type="text" id="inp"/>
		<div class="f_div">
			<div id="s_div">
				<!-- 第一排 -->
				<button value="192">~</button>
				<button value="49">1</button>
				<button value="50">2</button>
				<button value="51">3</button>
				<button value="52">4</button>
				<button value="53">5</button>
				<button value="54">6</button>
				<button value="55">7</button>
				<button value="56">8</button>
				<button value="57">9</button>
				<button value="48">0</button>
				<button value="189">-</button>
				<button value="187">+</button>
				<button style="width: 134px;" value="8">Delete</button>
				<!-- 第二排 -->
				<button style="width: 98px;" value="9">Tab</button>
				<button value="81">Q</button>
				<button value="87">W</button>
				<button value="69">E</button>
				<button value="82">R</button>
				<button value="84">T</button>
				<button value="89">Y</button>
				<button value="85">U</button>
				<button value="73">I</button>
				<button value="79">O</button>
				<button value="80">P</button>
				<button value="219">[</button>
				<button value="221">]</button>
				<button style="width:98px;" value="220">\</button>
				<!-- 第三排 -->
				<button style="width: 134px;" id="toggle_case" value="20">CapsLk</button>
				<button value="65">A</button>
				<button value="83">S</button>
				<button value="68">D</button>
				<button value="70">F</button>
				<button value="71">G</button>
				<button value="72">H</button>
				<button value="74">J</button>
				<button value="75">K</button>
				<button value="76">L</button>
				<button value="186">;</button>
				<button value="222">'</button>
				<button style="width:134px;" value="13">Enter</button>
				<!-- 第四排 -->
				<button style="width: 170px;" value="16">Shift</button>
				<button value="90">Z</button>
				<button value="88">X</button>
				<button value="67">C</button>
				<button value="86">V</button>
				<button value="66">B</button>
				<button value="78">N</button>
				<button value="77">M</button>
				<button value="188">,</button>
				<button value="190">.</button>
				<button value="191">/</button>
				<button style="width:170px;" value="11111">Shift</button>
				<!-- 第五排 -->
				<button style="width: 98px;" value="17">Ctrl</button>
				<button value="91">Win</button>
				<button value="18">Alt</button>
				<button style="width: 450px;" value="32">span</button>
				<button value="1111">Fn</button>
				<button value="1112">ray</button>
				<button style=" width: 103px;" value="93">Command</button>
				<button style="width: 98px;" value="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 == (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 = false;
}
}

而後還添加了一個定時器，用來模擬按鍵的點擊效果，讓每次點擊過500毫秒後清除點擊樣式，這樣就能夠實現點擊按鈕高光，高光又不會一直存在的狀況以下：

/* 清除鍵盤點擊樣式     */
var clearstyle = function clearstyle(){
$("#s_div button").removeClass("Labutcss");
}

就是這個樣子，更新完成後就能夠實現鍵盤的點擊輸入（可是隻能在英文狀態下，中文就打字了你懂的，此刻我留下了沒有技術的淚水QAQ）

效果圖和源碼等我上傳成功後再補上來。後續在更新

1. 鍵盤輸入_bp
2. Java鍵盤輸入
3. python讀取鍵盤輸入
4. mac 鍵盤輸入技巧
5. Java-Scanner鍵盤輸入
6. 【轉】Java鍵盤輸入
7. 九宮格鍵盤輸入
8. （十一）golang--鍵盤輸入
9. java 獲取鍵盤輸入
10. Android軟鍵盤輸入imeOptions
更多相關文章...
• jQuery Mobile 表單輸入元素 - jQuery Mobile 教程
• C# 文件的輸入與輸出 - C#教程
• Flink 數據傳輸及反壓詳解
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。