這是我的代碼。出于某種原因，即使 ID 為“answer”的段落標簽確實獲得了我單擊的按鈕的關鍵代碼，這段代碼也不會將焦點放在 ID 為“dude”的文本框上。就像 focus() 命令的行被完全忽略了。
document.getElementById("thing").addEventListener("keypress", function() {
myFunction(event);
});
function myFunction(event) {
document.getElementById("answer").innerHTML = event.keyCode;
document.getElementById("dude").focus();
}<!DOCTYPE html>
<html>
<body>
<input type="text" id="thing">
<input type="text" id="dude">
<p id="answer"></p>
</body>
</html>但是，如果我稍作修改并將帶有 focus() 的行放在 addEventListener() 之外，那么 focus() 就可以作業。例如，以下代碼有效：
document.getElementById("dude").focus();
document.getElementById("thing").addEventListener("keypress", function() {
myFunction(event);
});
function myFunction(event) {
document.getElementById("answer").innerHTML = event.keyCode;
}<!DOCTYPE html>
<html>
<body>
<input type="text" id="thing">
<input type="text" id="dude">
<p id="answer"></p>
</body>
</html>上面的代碼實際上是從給“dude”文本框焦點開始的。
這有什么理由嗎？我能做些什么嗎？
uj5u.com熱心網友回復：
keypress 事件處理程式觸發得太早 - 用戶尚未完成按下鍵并在該點輸入值，因此焦點恢復到初始輸入欄位。看看如果你改變焦點后setTimeout它會如何作業：
document.getElementById("thing").addEventListener("keypress", function() {
myFunction(event);
});
function myFunction(event) {
document.getElementById("answer").innerHTML = event.keyCode;
setTimeout(() => document.getElementById("dude").focus());
}<input type="text" id="thing">
<input type="text" id="dude">
<p id="answer"></p>或者keyup改為關注事件：
document.getElementById("thing").addEventListener("keyup", function() {
myFunction(event);
});
function myFunction(event) {
document.getElementById("answer").innerHTML = event.keyCode;
document.getElementById("dude").focus();
}<input type="text" id="thing">
<input type="text" id="dude">
<p id="answer"></p>例如，以下代碼有效：
不完全是，因為使用該代碼，您將dude輸入重點放在 pageload 上，而不是在thing輸入輸入內容時。
您還應該避免keypress在現代代碼中使用，它已被棄用：
不再推薦此功能。盡管某些瀏覽器可能仍然支持它，但它可能已經從相關的 Web 標準中洗掉，可能正在被洗掉，或者可能僅出于兼容性目的而保留。避免使用它，并盡可能更新現有代碼；請參閱本頁底部的兼容性表以指導您的決定。請注意，此功能可能隨時停止作業。
由于此事件已被棄用，您應該改用 beforeinput 或 keydown 。
keyCode從技術上講，它也是如此，但它的替代品.code- 并非在所有地方都兼容。
uj5u.com熱心網友回復：
使用keyup事件而不是keypress，因為事件的默認操作keypress將焦點設定回該輸入元素。
document.getElementById("thing").addEventListener("keyup", function() {
myFunction(event);
});
function myFunction(event) {
document.getElementById("answer").innerHTML = event.keyCode;
document.getElementById("dude").focus();
}<!DOCTYPE html>
<html>
<body>
<input type="text" id="thing">
<input type="text" id="dude">
<p id="answer"></p>
</body>
</html>uj5u.com熱心網友回復：
在輸入“thing”上完成“keypress”或“keyup”后，您似乎正試圖將焦點從輸入“thing”轉移到輸入“dude”。
我不明白這個用例。但是，如果您在輸入值后嘗試更改焦點狀態，IMO 建議您在“更改”事件上放置一個事件偵聽器。將資料輸入到輸入“thing”后，您只需按鍵盤上的“TAB”鍵，焦點將轉移到輸入“dude”，函式將執行。兩個都達到了！
document.getElementById("thing").addEventListener("change", function() {
myFunction(event);
});轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482091.html
標籤：javascript html