Question

我正在尝试使用HTML和JavaScript。在文本框中输入击键时，以下代码应该打印一些内容：

<html>
    <body>
        <input type="text" id="commandInput" name="command" size="50" />
        <script type="text/javascript">
            var commandInput = document.getElementById("commandInput");
            commandInput.onkeydown = function (evt) {
                document.writeln("Test");
            };
        </script>    

    </body>
</html>

由于某些原因，文本框在进入按键时消失，只留下白页。

为什么会发生这种情况？

Answer 1

页面加载后，您不应使用document.write或document.writeln。在页面加载后调用它（至少在Firefox中）会自动调用document.open()，这会清除当前文档。

如果您将其用作调试工具，我建议您改用Firebug和console.log()。

Answer 2

这是一种替代方法，使用.innerHTML在元素中插入文本。

<html>
    <body>
        <input type="text" id="commandInput" name="command" size="50" />
        <div id="text"></div>
        <script type="text/javascript">
            var commandInput = document.getElementById("commandInput");
            commandInput.onkeydown = function () {
                document.getElementById("text").innerHTML="Testing...";
            };
        </script>    
    </body>
</html>

Answer 3

尝试使用onkeyup，以便将最近的输入带入新字段。

在旁注中，把它扔进new.html并检查出来，如果你只是鬼混，可能会对你感兴趣，因为它会产生非常酷的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onkeyup</title>
<script type="text/javascript">
    function setFocus(){
        document.theForm.command.focus();   
    }
</script>
</head>

<body onload="setFocus()">
<form id="theForm">
<input type="text" id="commandInput" name="command" size="50" style="font-size:20px; color:gray; font-family:arial; border:0 none; opacity:0.4" />
        <div id="text" style="position:absolute; float:left; margin-left:3px; margin-top:-26px; font-size:20px; font-family:arial; color:black;"></div>
        <script type="text/javascript">
            var commandInput = document.getElementById("commandInput");
            commandInput.onkeyup = function () {
                document.getElementById("text").innerHTML=commandInput.value;
            };
        </script>   
</form> 
</body>
</html>

加载页面时，点击Tab并开始输入。

在事件处理程序中使用document.write？

3 个答案: