在 text input 中按到 Enter Key 導致 onblur 事件有問題
這是從一支 PHP 程式內簡化出來可以呈現問題的部分這個問題應該是網頁內 JavaScript 的事件觸發先後順序所造成的問題[code]<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>[/code]這是剛開啟網址的畫面
一般正常輸入順序，焦點進入 F1 然後再進入 F2 接著 Submit 得到的結果畫面
也是[color=Red]正確的結果[/color]
若輸入的狀況是焦點進入 F1 然後直接按下 Enter key 就會 Submit 得到的結果畫面
但卻是[color=Red]錯誤的結果[/color]
需要找個方式來讓 onblur event 的計算結果在 submit 事件觸發之前完成 將下列程式放在 <head></head> 範圍內[code]
<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>
[/code]這樣就會讓網頁中所有的 input text object 都忽略掉 Enter key 的輸入
有在 IE8, FF3, Google Chrome 等瀏覽器測試過了
因為 event.target 在 IE 不支援，而 event.srcElement 在非IE 則不支援，所以都要去判定
參考來源 [url]http://www.webcheatsheet.com/javascript/disable_enter_key.php[/url] 上面的方法將 text input 的 Enter key 給通殺
不過有時候應用的需求只要管控幾個欄位就好
繼續研究能限定指名 id or name 的方法
頁:
[1]