文本框中,回車(chē)鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
更新時(shí)間:2010年06月07日 23:00:52 作者:
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車(chē),焦點(diǎn)跳到下個(gè)文本框,或者觸發(fā)按鈕事件
判斷是否按下的為回車(chē)非常簡(jiǎn)單:
function EnterPress(){
if(event.keyCode == 13){
...
}
}
IE6的onkeypress會(huì)接受"回車(chē)事件",而onkeydown不會(huì)接受
IE8的onkeypress不會(huì)接受"回車(chē)事件",而onkeydown會(huì)接受
...不用糾結(jié)于此,兩個(gè)都寫(xiě)上吧
<input type="text" onkeypress="EnterPress()" onkeydown="EnterPress()" />
但是,到了FF下面,又會(huì)出現(xiàn)矛盾.FF是onkeypress和onkeydown都接受"回車(chē)事件"的.
同時(shí),為了兼容FF下面能獲得event,需要這樣寫(xiě):
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
...
}
}
那么,只要給任意的一個(gè)事件內(nèi)傳參數(shù) event,另外一個(gè)不傳參數(shù),即可以讓FF只執(zhí)行一次了:
&<input type="text" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />
綜上,兼容IE和FF:
<head>
<script>
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
document.getElementById("txtAdd").focus();
}
}
</script>
</head>
<body>
<input type="text" id="txtName" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />
<input type="text" id="txtAdd" />
</body>
--by:泡沫的幻想
復(fù)制代碼 代碼如下:
function EnterPress(){
if(event.keyCode == 13){
...
}
}
IE6的onkeypress會(huì)接受"回車(chē)事件",而onkeydown不會(huì)接受
IE8的onkeypress不會(huì)接受"回車(chē)事件",而onkeydown會(huì)接受
...不用糾結(jié)于此,兩個(gè)都寫(xiě)上吧
復(fù)制代碼 代碼如下:
<input type="text" onkeypress="EnterPress()" onkeydown="EnterPress()" />
但是,到了FF下面,又會(huì)出現(xiàn)矛盾.FF是onkeypress和onkeydown都接受"回車(chē)事件"的.
同時(shí),為了兼容FF下面能獲得event,需要這樣寫(xiě):
復(fù)制代碼 代碼如下:
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
...
}
}
那么,只要給任意的一個(gè)事件內(nèi)傳參數(shù) event,另外一個(gè)不傳參數(shù),即可以讓FF只執(zhí)行一次了:
復(fù)制代碼 代碼如下:
&<input type="text" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />
綜上,兼容IE和FF:
復(fù)制代碼 代碼如下:
<head>
<script>
function EnterPress(e){ //傳入 event
var e = e || window.event;
if(e.keyCode == 13){
document.getElementById("txtAdd").focus();
}
}
</script>
</head>
<body>
<input type="text" id="txtName" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />
<input type="text" id="txtAdd" />
</body>
--by:泡沫的幻想
您可能感興趣的文章:
- js 觸發(fā)select onchange事件代碼
- 代碼觸發(fā)js事件(click、change)示例應(yīng)用
- js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁(yè)中的絕對(duì)坐標(biāo)(示例代碼)
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript 動(dòng)態(tài)添加腳本,并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼
- 用javascript獲取當(dāng)頁(yè)面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對(duì)象的代碼
- 用按鈕觸發(fā)Javascript動(dòng)態(tài)生成一個(gè)表格的代碼
- FireFox與IE 下js兼容觸發(fā)click事件的代碼
- 鼠標(biāo)放上去觸發(fā)一個(gè)javascript提示框效果代碼
- UpdatePanel觸發(fā)javascript腳本的方法附代碼
- JS代碼觸發(fā)事件代碼實(shí)例
相關(guān)文章
DD_belatedPNG,IE6下PNG透明解決方案(國(guó)外)
今天介紹DD_belatedPNG,只需要一個(gè)理由,就是它支持backgrond-position與background-repeat.這是其他js插件不具備的.2010-12-12微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解
這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過(guò)程
最近在使用uniapp開(kāi)發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03JS獲取iframe中marginHeight和marginWidth屬性的方法
這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹(shù)定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05