Question

我是HTML和Javascript的新手。我使用一个非常简单的代码将输入字段中输入的一些文本追加到textarea中的文本。用户应该能够通过单击输入按钮或只需按Enter键来附加文本。我使用了这个线程中给出的代码并且它工作正常但是只要文本被追加，textarea中的整个文本就会消失！仅当按下回车键时才会发生这种情况。按下按钮时，代码工作正常。我想这可能是因为我将textarea和输入封装在表单标签中，因为当我删除它时，它似乎工作正常。但我需要将输入字段中输入的字符串发送到服务器，并将其显示在文本区域中。有点像聊天应用程序。那么我可以删除表单字段吗？另外，我对事件对象和window.event的工作方式不是很熟悉。我真的很感激我能得到的任何帮助。我使用以下内容作为参考。

attempting to make enter button 'clickable'

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<form name="frm">
<textarea id="textbox" name="textbox" rows="20" cols="70" readonly>
</textarea>


<input id="prmpt" type="text" name="prmpt" onkeypress="KeyPress(event)"/>
<input type="button" id="enterInst" value="Enter" onclick="doSomething();"/>
</form>


</body>

<script>

function KeyPress(e) { 
    e = e || window.event;
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 13) {
        doSomething();
    }
    return;
}

function doSomething(){
    var instruct = document.getElementById("prmpt").value;
    if(instruct === "\n")
    {
        document.getElementById("textbox").value += ">>"+instruct;
        document.getElementById("prmpt").value="";
        document.getElementById("prmpt").focus();
        return;
    }
    else{
        document.getElementById("textbox").value += "\n"+">>"+instruct;
        document.getElementById("prmpt").value="";
        document.getElementById("prmpt").focus();
        return;
    }

}

</script>
</html>

Answer 1

是的，你是对的，这是因为<form>。在输入框中按Enter键时，表单正在提交。为避免这种情况，您可以在e.preventDefault();函数中处理输入密钥后添加KeyPress()。像这样：

function KeyPress(e) { 
    e = e || window.event;
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 13) {
        e.preventDefault();
        doSomething();
    }
}

如何通过在javascript中按Enter键将文本添加到textarea

1 个答案: