JS實(shí)現(xiàn)獲取鍵盤(pán)按下的按鍵并顯示在頁(yè)面上的方法
更新時(shí)間：2015年11月04日 10:49:40 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)獲取鍵盤(pán)按下的按鍵并顯示在頁(yè)面上的方法,涉及JavaScript針對(duì)鍵盤(pán)事件及頁(yè)面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)獲取鍵盤(pán)按下的按鍵并顯示在頁(yè)面上的方法。分享給大家供大家參考，具體如下：
請(qǐng)你使用鍵盤(pán)輸入一些字符，這些字符就被顯示在網(wǎng)頁(yè)的空白處，是不是少了文本框或文本域之類(lèi)的東西，覺(jué)得挺不習(xí)慣呢？這個(gè)效果是應(yīng)用了JavaScript中的document.onkeypress對(duì)象，監(jiān)測(cè)鍵盤(pán)的一舉一動(dòng)，并記錄下哪些鍵被按下，有意思吧，想研究Js的朋友，就從這些小例子開(kāi)始吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-web-show-key-press-codes/
具體代碼如下：
<html>
<head>
<title>將按下的按鍵顯示在頁(yè)面上</title>
<script language="javascript">
<!--
str = "";
function showkey(){
asc = event.keyCode;
key = String.fromCharCode(asc);
str += key;
txt.innerHTML = str;
}
document.onkeypress=showkey;
-->
</script>
</head>
<body>
請(qǐng)使用鍵盤(pán)輸入文字：
<div id="txt"></div>
</body>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
這篇文章主要給大家介紹了關(guān)于jsonp跨域獲取數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了JS圖片無(wú)縫、平滑滾動(dòng)的實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
iframe里使用JavaScript控制主頁(yè)轉(zhuǎn)向的方法
這篇文章主要介紹了iframe里使用JavaScript控制主頁(yè)轉(zhuǎn)向的方法,涉及使用javascript實(shí)現(xiàn)iframe頁(yè)面跳轉(zhuǎn)的技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS函數(shù)基本定義與用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)基本定義、參數(shù)、返回值等相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
layui 圖片上傳+表單提交+ Spring MVC的實(shí)例
今天小編就為大家分享一篇layui 圖片上傳+表單提交+ Spring MVC的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS將滑動(dòng)門(mén)改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法
這篇文章主要介紹了JS將滑動(dòng)門(mén)改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法,涉及JavaScript頁(yè)面元素遍歷及樣式替換的相關(guān)技巧,再通過(guò)onmouseover與onclick即可分別實(shí)現(xiàn)滑動(dòng)門(mén)與選項(xiàng)卡兩種效果,需要的朋友可以參考下2015-09-09
Three.js+React實(shí)現(xiàn)3D文字懸浮效果
這篇文章主要介紹了如何利用Three.js+React制作出神奇的3D文字懸浮效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-03-03
javascript 操作cookies及正確使用cookies的屬性
在 JS(JavaScript) 操作cookies比較復(fù)雜，在 ASP 里面我們只需要知道 cookie 的名稱(chēng)、cookie 的值就行了，而 JS 里面，我們面對(duì)的是 cookie 的字符串，你自己編寫(xiě)這個(gè)字符串寫(xiě)入客戶(hù)端，然后自己解析這個(gè)字符串。2009-10-10
使用FormData上傳文件時(shí)，總是獲取不到req.file對(duì)象。發(fā)現(xiàn)是沒(méi)有配置對(duì)FormData導(dǎo)致的，怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了JS FormData上傳文件的設(shè)置方法，需要的朋友參考下吧2017-07-07
對(duì)字符串進(jìn)行HTML編碼和解碼的JavaScript函數(shù)
對(duì)字符串進(jìn)行HTML編碼和解碼的JS函數(shù)，記下了方便以后找 :)2010-02-02