<输入>keyup/.innerHTML调用时丢失值

<input> value lost on keyup / .innerHTML call

本文关键字：调用 lt 输入 gt keyup innerHTML      更新时间：2023-09-26

我正在做一个模仿控制台窗口的项目。当用户按下回车键时，一个新的<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);

还有Fiddle
另外，我不喜欢使用插件。

谢谢！

这是因为您正在重新设置页面的html标记。。。

与其添加纯HTML文本，不如考虑使用DOM元素操作：

更新的Fiddle

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之类的东西将新的输入元素添加到DOM中。

http://jsfiddle.net/894yo3ja/

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);

希望这有帮助，值不会被存储，所以你必须设置值属性。

问题是，当您重写内部html输出时，您在输入中输入的值将被擦除。要在覆盖主体上的内部html之前将值实际设置为输入，您需要调用.setAttribute（"value"，value）；在输入上。

相关文章：