兼容IE與firefox火狐的回車事件(js與jquery)
更新時(shí)間:2010年10月20日 15:05:44 作者:
今天看了網(wǎng)上的朋友說了,很多網(wǎng)站提供的回車事件代碼都是不兼容firefox的,其實(shí)腳本之家提供的代碼,一直以來都是盡量的兼容多瀏覽器。
javascript 兼容IE與firefox火狐的回車事件
<script language="javascript">
function keypress(e)
{
var currKey=0,e=e||event;
if(e.keyCode==13)document.myform.submit();
}
document.onkeypress=keypress;
</script>
<script>
document.onkeydown=function(event)
{
e = event ? event :(window.event ? window.event : null);
if(e.keyCode==13){
//執(zhí)行的方法
alert('回車檢測到了');
}
}
</script>
jquery 兼容IE與firefox火狐的回車事件
$(document).ready(function(){
$("按下回車的控件").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#回車事件按鈕控件").click();
return false;
}
});
});
jquery多瀏覽器捕捉回車事件代碼
$(document).keydown(function(event) {
if (event.keyCode == 13) {
$('form').each(function() {
//你的要運(yùn)行的代碼
});
}
});
基于jquery的button默認(rèn)enter事件(回車事件)
這里我介紹一下,button按鈕默認(rèn)回車(enter)事件。如果大家可以用submit,就不用看以下代碼,因?yàn)閟ubmit可以直接默認(rèn)回車事件(enter)
在這里特此聲明,代碼是通過jquery完成。實(shí)列代碼我親自寫的,完全可以實(shí)現(xiàn),只要復(fù)制過去就可以用,但是必須導(dǎo)入jquery包。著個(gè)方法支持ie與火狐,絕對好使。我在做的時(shí)候在網(wǎng)上找了一些代碼,基本全不支持火狐。好了,廢話也說了不少了。開始代碼演示。歡迎大家挑錯(cuò),與技術(shù)指點(diǎn),謝謝。
<!DOCTYPE html PUBLIC "-//W< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>火狐和IE都支持的enter事件</title>
<script src="jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if (code == 13) {
$("#but1").click();
}
}
$(document).ready(function () {
$("#but1").click(function () {
alert("我是enter事件," + "text值:" + $("#text1").val());
})
$("#but2").click(function () {
alert("我是Jquery事件" + "text值:" + $("#text1").val());
})
});
</script>
這個(gè)問題解決了,如果有更好的解決方案也希望拿出來一起分享一下。
今天做一個(gè)回車鍵提交表單登錄的功能,我的代碼如下:
<script language="javascript">
function document.onkeypress()
{
if(event.keyCode==13)document.myloginform.submit();
}
</script>
在火狐里執(zhí)行的時(shí)候得到了一個(gè)錯(cuò)誤: missing ( before formal parameters
根據(jù)網(wǎng)上的建議我又改了我的源代碼:
<script language="javascript">
document.onkeypress=function()
{
if(event.keyCode==13)document.myloginform.submit();
}
</script>
又得到了一個(gè) event is not defined 的錯(cuò)誤。
苦苦尋覓,我找到了它(原文如下):
主要分四個(gè)部分
第一部分:瀏覽器的按鍵事件
第二部分:兼容瀏覽器
第三部分:代碼實(shí)現(xiàn)和優(yōu)化
第四部分:總結(jié)
第一部分:瀏覽器的按鍵事件
用 js實(shí)現(xiàn)鍵盤記錄,要關(guān)注瀏覽器的三種按鍵事件類型,即keydown,keypress和keyup,它們分別對應(yīng)onkeydown、 onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件,依次是keydown,keypress,然后是按鍵釋放時(shí) 候的keyup。
在這3種事件類型中,keydown和keyup比較底層,而keypress比較高級。這里所謂的高級是指,當(dāng)用戶按 下shift + 1時(shí),keypress是對這個(gè)按鍵事件進(jìn)行解析后返回一個(gè)可打印的"!"字符,而keydown和keyup只是記錄了shift + 1這個(gè)事件。[1]
但是keypress只能針對一些可以打印出來的字符有效,而對于功能按鍵,如F1-F12、 Backspace、Enter、Escape、PageUP、PageDown和箭頭方向等,就不會(huì)產(chǎn)生keypress事件,但是可以產(chǎn)生 keydown和keyup事件。然而在FireFox中,功能按鍵是可以產(chǎn)生keypress事件的。
傳遞給keydown、keypress和keyup事件句柄的事件對象有一些通用的屬性。如果Alt、Ctrl或Shift和一個(gè)按鍵一起按下,這通過事件的altKey、ctrlKey和shiftKey屬性表示,這些屬性在FireFox和IE中是通用的。
第二部分:兼容瀏覽器
凡是涉及瀏覽器的js,就都要考慮瀏覽器兼容的問題。
目前常用的瀏覽器主要有基于IE和基于Mozilla兩大類。Maxthon是基于IE內(nèi)核的,而FireFox和Opera是基于Mozilla內(nèi)核的。
2.1 事件的初始化
首先需要了解的是如何初始化該事件,基本語句如下:
function keyDown(){}
document.onkeydown = keyDown;
當(dāng)瀏覽器讀到這個(gè)語句時(shí),無論按下鍵盤上的哪個(gè)鍵,都將呼叫KeyDown()函數(shù)。
2.2 FireFox和Opera的實(shí)現(xiàn)方法
FireFox和Opera等程序?qū)崿F(xiàn)要比IE麻煩,所以這里先描述一下。
keyDown()函數(shù)有一個(gè)隱藏的變量–一般的,我們使用字母"e"來表示這個(gè)變量。
function keyDown(e)
變量e表示發(fā)生擊鍵事件,尋找是哪個(gè)鍵被按下,要使用which這個(gè)屬性:
e.which
e.which將給出該鍵的索引值,把索引值轉(zhuǎn)化成該鍵的字母或數(shù)字值的方法需要用到靜態(tài)函數(shù)String.fromCharCode(),如下:
String.fromCharCode(e.which)
把上面的語句放在一起,我們可以在FireFox中得到被按下的是哪一個(gè)鍵:
function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.3 IE的實(shí)現(xiàn)方法
IE的程序不需要e變量,用window.event.keyCode來代替e.which,把鍵的索引值轉(zhuǎn)化為真實(shí)鍵值方法類似:String.fromCharCode(event.keyCode),程序如下:
function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.4 判斷瀏覽器類型
上 面了解了在各種瀏覽器里是如何實(shí)現(xiàn)獲取按鍵事件對象的方法,那么下面需要判斷瀏覽器類型,這個(gè)方法很多,有比較方便理解的,也有很巧妙的辦法,先說一般的 方法:就是利用navigator對象的appName屬性,當(dāng)然也可以用userAgent屬性,這里用appName來實(shí)現(xiàn)判斷瀏覽器類型,IE和 Maxthon的appName是"Microsoft Internet Explorer" ,而FireFox和Opera的appName是"Netscape",所以一個(gè)功能比較簡單的代碼如下:
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeyup = keyUp;
比較簡潔的方法是[2]:
function keyUp(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("按鍵碼: " + currKey + " 字符: " + keyName);
}
document.onkeyup = keyUp;
上面這種方法比較巧妙,簡單地解釋一下:
首先,e=e||event;這句代碼是為了進(jìn)行瀏覽器事件對象獲取的兼容。js中這句代碼的意思是,如果在FireFox或Opera中,隱藏的變量e是存在的,那么e||event返回e,如果在IE中,隱藏變量e是不存在,則返回event。
其 次,currKey=e.keyCode||e.which||e.charCode;這句是為了兼容瀏覽器按鍵事件對象的按鍵碼屬性(詳見第三部分), 如IE中,只有keyCode屬性,而FireFox中有which和charCode屬性,Opera中有keyCode和which屬性等。
上述代碼只是兼容了瀏覽器,獲取了keyup事件對象,簡單的彈出了按鍵碼和按鍵的字符,但是問題出現(xiàn)了,當(dāng)你按鍵時(shí),字符鍵都是大寫的,而按shift鍵時(shí),顯示的字符很奇怪,所以就需要優(yōu)化一下代碼了。
第三部分:代碼實(shí)現(xiàn)和優(yōu)化
3.1 按鍵事件的按鍵碼和字符碼
按鍵事件的按鍵碼和字符碼缺乏瀏覽器間的可移植性,對于不同的瀏覽器和不同的案件事件,按鍵碼和字符碼的存儲(chǔ)方式都是不同的,按鍵事件,瀏覽器和按鍵事件對象屬性關(guān)系如下表:
如表所示:
在 IE中,只有一個(gè)keyCode屬性,并且它的解釋取決于事件類型。對于keydown來說,keyCode存儲(chǔ)的是按鍵碼,對于keypress事件來 說,keyCode存儲(chǔ)的是一個(gè)字符碼。而IE中沒有which和charCode屬性,所以which和charCode屬性始終為 undefined。
FireFox中keyCode始終為0,時(shí)間keydown/keyup時(shí),charCode=0,which為按鍵碼。事件keypress時(shí),which和charCode二者的值相同,存儲(chǔ)了字符碼。
在Opera中,keyCode和which二者的值始終相同,在keydown/keyup事件中,它們存儲(chǔ)按鍵碼,在keypress時(shí)間中,它們存儲(chǔ)字符碼,而charCode沒有定義,始終是undefined。
3.2 用keydown/keyup還是keypress
第一部分已經(jīng)介紹了keydown/keyup和keypress的區(qū)別,有一條比較通用的規(guī)則,keydown事件對于功能按鍵來說是最有用的,而keypress事件對于可打印按鍵來說是最有用的[3]。
鍵盤記錄主要是針對于可打印字符和部分功能按鍵,所以keypress是首選,然而正如第一部分提到的,IE中keypress不支持功能按鍵,所以應(yīng)該用keydown/keyup事件來進(jìn)行補(bǔ)充。
3.3 代碼的實(shí)現(xiàn)
總體思路,用keypress事件對象獲取按鍵字符,用keydown事件獲取功能字符,如Enter,Backspace等。
代碼實(shí)現(xiàn)如下所示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>js 按鍵記錄</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="羽殤仁">
<META NAME="Keywords" CONTENT="js 按鍵記錄">
<META NAME="Description" CONTENT="js 按鍵記錄">
</HEAD>
<BODY>
<script type="text/javascript">
var keystring = "";//記錄按鍵的字符串
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
//屏蔽了退格、制表、回車、空格、方向鍵、刪除鍵
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
case 8: keyName = "[退格]"; break;
case 9: keyName = "[制表]"; break;
case 13:keyName = "[回車]"; break;
case 32:keyName = "[空格]"; break;
case 33:keyName = "[PageUp]"; break;
case 34:keyName = "[PageDown]"; break;
case 35:keyName = "[End]"; break;
case 36:keyName = "[Home]"; break;
case 37:keyName = "[方向鍵左]"; break;
case 38:keyName = "[方向鍵上]"; break;
case 39:keyName = "[方向鍵右]"; break;
case 40:keyName = "[方向鍵下]"; break;
case 46:keyName = "[刪除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("content").innerHTML=keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<input type="text" />
<input type="button" value="清空記錄" onclick="$(‘content').innerHTML = ";keystring = ";"/>
<br/>請按下任意鍵查看鍵盤響應(yīng)鍵值:<span id="content"></span>
</BODY>
</HTML>
代碼分析:
$():根據(jù)ID獲取dom
keypress(e):實(shí)現(xiàn)對字符碼的截獲,由于功能按鍵要用keydown獲取,所以在keypress中屏蔽了這些功能按鍵。
keydown(e):主要是實(shí)現(xiàn)了對功能按鍵的獲取。
keyup(e):展示截獲的字符串。
代碼基本上就算實(shí)現(xiàn)完成了!呵呵
第四部分:總結(jié)
編寫代碼的最初目的是能夠通過js記錄按鍵,并返回一個(gè)字符串。
上 述代碼只是用js實(shí)現(xiàn)了基本的英文按鍵記錄,對于漢字是無能為力,記錄漢字,我能想到的辦法,當(dāng)然是用js,是用keydown和keyup記錄底層按鍵 事件,漢字解析當(dāng)然無能為力。當(dāng)然你可以用DOM的方式直接獲取input中的漢字,但這已經(jīng)離開了本文討論的用按鍵事件實(shí)現(xiàn)按鍵記錄的本意。
上述代碼還可以實(shí)現(xiàn)添加剪切板的功能,監(jiān)控刪除的功能等等……
根據(jù)它的指點(diǎn),我修改了我的代碼為:
<script language="javascript">
function keypress(e)
{
var currKey=0,e=e||event;
if(e.keyCode==13)document.myform.submit();
}
document.onkeypress=keypress;
</script>
成功!
復(fù)制代碼 代碼如下:
<script language="javascript">
function keypress(e)
{
var currKey=0,e=e||event;
if(e.keyCode==13)document.myform.submit();
}
document.onkeypress=keypress;
</script>
復(fù)制代碼 代碼如下:
<script>
document.onkeydown=function(event)
{
e = event ? event :(window.event ? window.event : null);
if(e.keyCode==13){
//執(zhí)行的方法
alert('回車檢測到了');
}
}
</script>
jquery 兼容IE與firefox火狐的回車事件
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("按下回車的控件").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#回車事件按鈕控件").click();
return false;
}
});
});
jquery多瀏覽器捕捉回車事件代碼
復(fù)制代碼 代碼如下:
$(document).keydown(function(event) {
if (event.keyCode == 13) {
$('form').each(function() {
//你的要運(yùn)行的代碼
});
}
});
基于jquery的button默認(rèn)enter事件(回車事件)
這里我介紹一下,button按鈕默認(rèn)回車(enter)事件。如果大家可以用submit,就不用看以下代碼,因?yàn)閟ubmit可以直接默認(rèn)回車事件(enter)
在這里特此聲明,代碼是通過jquery完成。實(shí)列代碼我親自寫的,完全可以實(shí)現(xiàn),只要復(fù)制過去就可以用,但是必須導(dǎo)入jquery包。著個(gè)方法支持ie與火狐,絕對好使。我在做的時(shí)候在網(wǎng)上找了一些代碼,基本全不支持火狐。好了,廢話也說了不少了。開始代碼演示。歡迎大家挑錯(cuò),與技術(shù)指點(diǎn),謝謝。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>火狐和IE都支持的enter事件</title>
<script src="jquery.1.3.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if (code == 13) {
$("#but1").click();
}
}
$(document).ready(function () {
$("#but1").click(function () {
alert("我是enter事件," + "text值:" + $("#text1").val());
})
$("#but2").click(function () {
alert("我是Jquery事件" + "text值:" + $("#text1").val());
})
});
</script>
這個(gè)問題解決了,如果有更好的解決方案也希望拿出來一起分享一下。
今天做一個(gè)回車鍵提交表單登錄的功能,我的代碼如下:
復(fù)制代碼 代碼如下:
<script language="javascript">
function document.onkeypress()
{
if(event.keyCode==13)document.myloginform.submit();
}
</script>
在火狐里執(zhí)行的時(shí)候得到了一個(gè)錯(cuò)誤: missing ( before formal parameters
根據(jù)網(wǎng)上的建議我又改了我的源代碼:
復(fù)制代碼 代碼如下:
<script language="javascript">
document.onkeypress=function()
{
if(event.keyCode==13)document.myloginform.submit();
}
</script>
又得到了一個(gè) event is not defined 的錯(cuò)誤。
苦苦尋覓,我找到了它(原文如下):
主要分四個(gè)部分
第一部分:瀏覽器的按鍵事件
第二部分:兼容瀏覽器
第三部分:代碼實(shí)現(xiàn)和優(yōu)化
第四部分:總結(jié)
第一部分:瀏覽器的按鍵事件
用 js實(shí)現(xiàn)鍵盤記錄,要關(guān)注瀏覽器的三種按鍵事件類型,即keydown,keypress和keyup,它們分別對應(yīng)onkeydown、 onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件,依次是keydown,keypress,然后是按鍵釋放時(shí) 候的keyup。
在這3種事件類型中,keydown和keyup比較底層,而keypress比較高級。這里所謂的高級是指,當(dāng)用戶按 下shift + 1時(shí),keypress是對這個(gè)按鍵事件進(jìn)行解析后返回一個(gè)可打印的"!"字符,而keydown和keyup只是記錄了shift + 1這個(gè)事件。[1]
但是keypress只能針對一些可以打印出來的字符有效,而對于功能按鍵,如F1-F12、 Backspace、Enter、Escape、PageUP、PageDown和箭頭方向等,就不會(huì)產(chǎn)生keypress事件,但是可以產(chǎn)生 keydown和keyup事件。然而在FireFox中,功能按鍵是可以產(chǎn)生keypress事件的。
傳遞給keydown、keypress和keyup事件句柄的事件對象有一些通用的屬性。如果Alt、Ctrl或Shift和一個(gè)按鍵一起按下,這通過事件的altKey、ctrlKey和shiftKey屬性表示,這些屬性在FireFox和IE中是通用的。
第二部分:兼容瀏覽器
凡是涉及瀏覽器的js,就都要考慮瀏覽器兼容的問題。
目前常用的瀏覽器主要有基于IE和基于Mozilla兩大類。Maxthon是基于IE內(nèi)核的,而FireFox和Opera是基于Mozilla內(nèi)核的。
2.1 事件的初始化
首先需要了解的是如何初始化該事件,基本語句如下:
function keyDown(){}
document.onkeydown = keyDown;
當(dāng)瀏覽器讀到這個(gè)語句時(shí),無論按下鍵盤上的哪個(gè)鍵,都將呼叫KeyDown()函數(shù)。
2.2 FireFox和Opera的實(shí)現(xiàn)方法
FireFox和Opera等程序?qū)崿F(xiàn)要比IE麻煩,所以這里先描述一下。
keyDown()函數(shù)有一個(gè)隱藏的變量–一般的,我們使用字母"e"來表示這個(gè)變量。
function keyDown(e)
變量e表示發(fā)生擊鍵事件,尋找是哪個(gè)鍵被按下,要使用which這個(gè)屬性:
e.which
e.which將給出該鍵的索引值,把索引值轉(zhuǎn)化成該鍵的字母或數(shù)字值的方法需要用到靜態(tài)函數(shù)String.fromCharCode(),如下:
String.fromCharCode(e.which)
把上面的語句放在一起,我們可以在FireFox中得到被按下的是哪一個(gè)鍵:
復(fù)制代碼 代碼如下:
function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.3 IE的實(shí)現(xiàn)方法
IE的程序不需要e變量,用window.event.keyCode來代替e.which,把鍵的索引值轉(zhuǎn)化為真實(shí)鍵值方法類似:String.fromCharCode(event.keyCode),程序如下:
復(fù)制代碼 代碼如下:
function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.4 判斷瀏覽器類型
上 面了解了在各種瀏覽器里是如何實(shí)現(xiàn)獲取按鍵事件對象的方法,那么下面需要判斷瀏覽器類型,這個(gè)方法很多,有比較方便理解的,也有很巧妙的辦法,先說一般的 方法:就是利用navigator對象的appName屬性,當(dāng)然也可以用userAgent屬性,這里用appName來實(shí)現(xiàn)判斷瀏覽器類型,IE和 Maxthon的appName是"Microsoft Internet Explorer" ,而FireFox和Opera的appName是"Netscape",所以一個(gè)功能比較簡單的代碼如下:
復(fù)制代碼 代碼如下:
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert("按鍵碼: " + keycode + " 字符: " + realkey);
}
document.onkeyup = keyUp;
比較簡潔的方法是[2]:
復(fù)制代碼 代碼如下:
function keyUp(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("按鍵碼: " + currKey + " 字符: " + keyName);
}
document.onkeyup = keyUp;
上面這種方法比較巧妙,簡單地解釋一下:
首先,e=e||event;這句代碼是為了進(jìn)行瀏覽器事件對象獲取的兼容。js中這句代碼的意思是,如果在FireFox或Opera中,隱藏的變量e是存在的,那么e||event返回e,如果在IE中,隱藏變量e是不存在,則返回event。
其 次,currKey=e.keyCode||e.which||e.charCode;這句是為了兼容瀏覽器按鍵事件對象的按鍵碼屬性(詳見第三部分), 如IE中,只有keyCode屬性,而FireFox中有which和charCode屬性,Opera中有keyCode和which屬性等。
上述代碼只是兼容了瀏覽器,獲取了keyup事件對象,簡單的彈出了按鍵碼和按鍵的字符,但是問題出現(xiàn)了,當(dāng)你按鍵時(shí),字符鍵都是大寫的,而按shift鍵時(shí),顯示的字符很奇怪,所以就需要優(yōu)化一下代碼了。
第三部分:代碼實(shí)現(xiàn)和優(yōu)化
3.1 按鍵事件的按鍵碼和字符碼
按鍵事件的按鍵碼和字符碼缺乏瀏覽器間的可移植性,對于不同的瀏覽器和不同的案件事件,按鍵碼和字符碼的存儲(chǔ)方式都是不同的,按鍵事件,瀏覽器和按鍵事件對象屬性關(guān)系如下表:
如表所示:
在 IE中,只有一個(gè)keyCode屬性,并且它的解釋取決于事件類型。對于keydown來說,keyCode存儲(chǔ)的是按鍵碼,對于keypress事件來 說,keyCode存儲(chǔ)的是一個(gè)字符碼。而IE中沒有which和charCode屬性,所以which和charCode屬性始終為 undefined。
FireFox中keyCode始終為0,時(shí)間keydown/keyup時(shí),charCode=0,which為按鍵碼。事件keypress時(shí),which和charCode二者的值相同,存儲(chǔ)了字符碼。
在Opera中,keyCode和which二者的值始終相同,在keydown/keyup事件中,它們存儲(chǔ)按鍵碼,在keypress時(shí)間中,它們存儲(chǔ)字符碼,而charCode沒有定義,始終是undefined。
3.2 用keydown/keyup還是keypress
第一部分已經(jīng)介紹了keydown/keyup和keypress的區(qū)別,有一條比較通用的規(guī)則,keydown事件對于功能按鍵來說是最有用的,而keypress事件對于可打印按鍵來說是最有用的[3]。
鍵盤記錄主要是針對于可打印字符和部分功能按鍵,所以keypress是首選,然而正如第一部分提到的,IE中keypress不支持功能按鍵,所以應(yīng)該用keydown/keyup事件來進(jìn)行補(bǔ)充。
3.3 代碼的實(shí)現(xiàn)
總體思路,用keypress事件對象獲取按鍵字符,用keydown事件獲取功能字符,如Enter,Backspace等。
代碼實(shí)現(xiàn)如下所示
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>js 按鍵記錄</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="羽殤仁">
<META NAME="Keywords" CONTENT="js 按鍵記錄">
<META NAME="Description" CONTENT="js 按鍵記錄">
</HEAD>
<BODY>
<script type="text/javascript">
var keystring = "";//記錄按鍵的字符串
function $(s){return document.getElementById(s)?document.getElementById(s):s;}
function keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
//屏蔽了退格、制表、回車、空格、方向鍵、刪除鍵
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
case 8: keyName = "[退格]"; break;
case 9: keyName = "[制表]"; break;
case 13:keyName = "[回車]"; break;
case 32:keyName = "[空格]"; break;
case 33:keyName = "[PageUp]"; break;
case 34:keyName = "[PageDown]"; break;
case 35:keyName = "[End]"; break;
case 36:keyName = "[Home]"; break;
case 37:keyName = "[方向鍵左]"; break;
case 38:keyName = "[方向鍵上]"; break;
case 39:keyName = "[方向鍵右]"; break;
case 40:keyName = "[方向鍵下]"; break;
case 46:keyName = "[刪除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("content").innerHTML=keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<input type="text" />
<input type="button" value="清空記錄" onclick="$(‘content').innerHTML = ";keystring = ";"/>
<br/>請按下任意鍵查看鍵盤響應(yīng)鍵值:<span id="content"></span>
</BODY>
</HTML>
代碼分析:
$():根據(jù)ID獲取dom
keypress(e):實(shí)現(xiàn)對字符碼的截獲,由于功能按鍵要用keydown獲取,所以在keypress中屏蔽了這些功能按鍵。
keydown(e):主要是實(shí)現(xiàn)了對功能按鍵的獲取。
keyup(e):展示截獲的字符串。
代碼基本上就算實(shí)現(xiàn)完成了!呵呵
第四部分:總結(jié)
編寫代碼的最初目的是能夠通過js記錄按鍵,并返回一個(gè)字符串。
上 述代碼只是用js實(shí)現(xiàn)了基本的英文按鍵記錄,對于漢字是無能為力,記錄漢字,我能想到的辦法,當(dāng)然是用js,是用keydown和keyup記錄底層按鍵 事件,漢字解析當(dāng)然無能為力。當(dāng)然你可以用DOM的方式直接獲取input中的漢字,但這已經(jīng)離開了本文討論的用按鍵事件實(shí)現(xiàn)按鍵記錄的本意。
上述代碼還可以實(shí)現(xiàn)添加剪切板的功能,監(jiān)控刪除的功能等等……
根據(jù)它的指點(diǎn),我修改了我的代碼為:
復(fù)制代碼 代碼如下:
<script language="javascript">
function keypress(e)
{
var currKey=0,e=e||event;
if(e.keyCode==13)document.myform.submit();
}
document.onkeypress=keypress;
</script>
成功!
您可能感興趣的文章:
- jQuery 回車事件enter使用示例
- jQuery javaScript捕獲回車事件(示例代碼)
- jquery 回車事件實(shí)現(xiàn)代碼
- 基于jquery的button默認(rèn)enter事件(回車事件)。
- jquery多瀏覽器捕捉回車事件代碼
- jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
- jquery文本框中的事件應(yīng)用以輸入郵箱為例
- jQuery文本框(input textare)事件綁定方法教程
- jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
- jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
- jQuery簡單設(shè)置文本框回車事件的方法
相關(guān)文章
值得學(xué)習(xí)的bootstrap fileinput文件上傳工具
這篇文章主要分享了一款值得大家學(xué)習(xí)的bootstrap fileinput文件上傳工具,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11原生JavaScript實(shí)現(xiàn)連連看游戲(附源碼)
原生JavaScript版連連看游戲,有源碼,適合初學(xué)者學(xué)習(xí),喜歡的朋友可以研究下2013-11-11js實(shí)現(xiàn)獲取div坐標(biāo)的方法
這篇文章主要介紹了js實(shí)現(xiàn)獲取div坐標(biāo)的方法,通過調(diào)用jQuery插件實(shí)現(xiàn)獲取div元素坐標(biāo)的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-11-11基于javascript滾動(dòng)圖片具體實(shí)現(xiàn)
這篇文章主要介紹了javascript滾動(dòng)圖片具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-11-11js中addEventListener()與removeEventListener()用法案例分析
這篇文章主要介紹了js中addEventListener()與removeEventListener()用法,結(jié)合實(shí)例形式分析了js中addEventListener()與removeEventListener()基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
這篇文章主要介紹了element-ui 表單校驗(yàn) Rules 配置 常用黑科技,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07