[英]<input> value lost on keyup / .innerHTML call
我正在研究一個模仿控制台窗口的項目。 當用戶按下Enter鍵時，新的<input>文本字段將添加到屏幕上並集中注意。 唯一的問題是在過程中丟失了先前<input>字段的值。
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<input type="text" class="console_window"/>
</body>
</html>
var input;
function init() {
function keyup(e) {
switch(e.which) {
case 13:
document.body.innerHTML +=
"<input type='text' class='console_window'/>"
input = document.getElementsByClassName("console_window")[document.getElementsByClassName("console_window").length-1];
input.focus();
break;
}
}
document.addEventListener("keyup", keyup, false);
}
document.addEventListener("DOMContentLoaded", init, false);
和小提琴 。
另外，我不想使用插件。
謝謝！
這是因為您正在重置頁面的html標記...
您應該考慮使用DOM元素操作來代替addind純HTML文本：
var inp = document.createElement("input");
inp.className = "console_window";
inp.type = "text";
document.body.appendChild(inp);
inp.focus();
當您執行document.body.innerHTML += "<input type='text' class='console_window'/>" ，您將銷毀所有輸入元素並重新創建它們。 執行此操作時，值不會復制。 您想使用諸如appendChild之類的東西將新的input元素添加到DOM中。
var input;
function keyup(e) {
switch (e.which) {
case 13:
var i = document.getElementsByClassName("console_window").length + 1;
document.getElementById(i - 1).setAttribute("value", document.getElementById(i - 1).value);
document.body.innerHTML += "<input type='text' class='console_window' id='" + i + "'/>";
document.getElementById(i).focus();
break;
}
}
document.addEventListener("keyup", keyup, false);
希望有幫助，不要存儲值，因此您必須設置value屬性。
您遇到的問題是，當您重新寫入內部html時，輸入中輸入的值將被清除。 要在覆蓋主體上的內部html之前實際將值設置為輸入，您需要調用.setAttribute（“ value”，value）;。 在輸入上。
JavaScript 將輸入值復制到 keyup 上的 innerHTML (addEventListener)
[英]JavaScript copy Input value to innerHTML on keyup (addEventListener)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.