Question

我正在开发一个模仿控制台窗口的项目。当用户按下回车键时，新的<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 另外，我不想使用插件。

谢谢！

Answer 1

这是因为您正在重置页面的html标记......

不应添加纯HTML文本，而应考虑使用DOM元素操作：

Updated Fiddle

var inp = document.createElement("input");
inp.className = "console_window";
inp.type = "text";

document.body.appendChild(inp);
inp.focus();

Answer 2

执行document.body.innerHTML += "<input type='text' class='console_window'/>"时，您正在销毁所有输入元素并重新创建它们。执行此操作时，值不会复制。你想使用像appendChild这样的东西来将新的输入元素添加到DOM中。

Answer 3

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

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

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

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

3 个答案: