bestlong 怕失憶論壇

標題: 在 text input 中按到 Enter Key 導致 onblur 事件有問題 [打印本頁]

作者: bestlong 時間: 2010-9-2 17:30 標題: 在 text input 中按到 Enter Key 導致 onblur 事件有問題

這是從一支 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 事件觸發之前完成

圖片附件: blur-1.png (2010-9-3 07:41, 2.51 KB) / 下載次數 418
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MTU4fDg3ZTQzNjNjfDE3NDYxMTY3NTB8MA%3D%3D

圖片附件: blur-2.png (2010-9-3 07:41, 2.78 KB) / 下載次數 403
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MTU5fGE5MDM1MjYyfDE3NDYxMTY3NTB8MA%3D%3D

圖片附件: blur-3.png (2010-9-3 07:41, 2.74 KB) / 下載次數 414
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MTYwfGFkZmJmMGNlfDE3NDYxMTY3NTB8MA%3D%3D

作者: bestlong 時間: 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

作者: bestlong 時間: 2010-9-11 00:39

上面的方法將 text input 的 Enter key 給通殺
不過有時候應用的需求只要管控幾個欄位就好
繼續研究能限定指名 id or name 的方法

歡迎光臨 bestlong 怕失憶論壇 (http://www.bestlong.idv.tw/)