在 text input 中按到 Enter Key 導致 onblur 事件有問題 - JavaScript - bestlong 怕失憶論壇

bestlong 怕失憶論壇 › 論壇 › JavaScript › 在 text input 中按到 Enter Key 導致 onblur 事件有問 ...

查看: 6154\|回復: 2	go 在 text input 中按到 Enter Key 導致 onblur 事件有問題 [複製鏈接]

bestlong

管理員

Rank: 9 Rank: 9 Rank: 9

1^#

發表於 2010-9-2 17:30 |只看該作者 |倒序瀏覽 |打印

這是從一支 PHP 程式內簡化出來可以呈現問題的部分

這個問題應該是網頁內 JavaScript 的事件觸發先後順序所造成的問題

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<title>測試</title>
</head>
<body>
F1: <?php echo $_POST['F1']; ?><br />
F2: <?php echo $_POST['F2']; ?><br />
<form name="theForm" method="post" action="">
F1: <input name="F1" type="text" value="A" onblur="setF2()"><br />
F2: <input name="F2" type="text" value="B"><br />
<input type="submit">
</form>
<script language="JavaScript">
function setF2()
{
document.forms['theForm'].elements['F2'].value = "XXXXXXXX";
}
</script>
</body>
</html>

複製代碼

這是剛開啟網址的畫面

一般正常輸入順序，焦點進入 F1 然後再進入 F2 接著 Submit 得到的結果畫面
也是正確的結果

若輸入的狀況是焦點進入 F1 然後直接按下 Enter key 就會 Submit 得到的結果畫面
但卻是錯誤的結果

需要找個方式來讓 onblur event 的計算結果在 submit 事件觸發之前完成

收藏0 分享0

我是雪龍
http://blog.bestlong.idv.tw
http://www.bestlong.idv.tw

回復引用

舉報返回頂部

bestlong

管理員

Rank: 9 Rank: 9 Rank: 9

2^#

發表於 2010-9-3 14:34 |只看該作者

將下列程式放在 <head></head> 範圍內

<script language="JavaScript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>

複製代碼

這樣就會讓網頁中所有的 input text object 都忽略掉 Enter key 的輸入
有在 IE8, FF3, Google Chrome 等瀏覽器測試過了

因為 event.target 在 IE 不支援，而 event.srcElement 在非IE 則不支援，所以都要去判定

參考來源 http://www.webcheatsheet.com/javascript/disable_enter_key.php

我是雪龍
http://blog.bestlong.idv.tw
http://www.bestlong.idv.tw

點評回復引用

舉報返回頂部

bestlong