【问题标题】:How to add text to textarea by pressing the enter key in javascript如何通过在javascript中按回车键将文本添加到textarea
【发布时间】:2014-06-19 14:10:20
【问题描述】:

我对 HTML 和 Javascript 完全陌生。我正在使用一个非常简单的代码将在输入字段中键入的一些文本附加到文本区域中的文本。用户应该能够通过单击输入按钮或只需按下输入键来附加文本。我使用了该线程中给出的代码,它工作正常,但是一旦附加文本,文本区域中的整个文本就会消失!这仅在按下回车键时发生。按下按钮时代码工作正常。我认为这可能是因为我将文本区域和输入包含在表单标签中,因为当我删除它时,它似乎工作正常。但我需要将输入字段中键入的字符串发送到服务器,并将其显示在文本区域中。有点像聊天应用程序。那么我可以删除表单域吗?此外,我对事件对象和 window.event 的工作方式也不是很熟悉。我真的很感激我能得到的任何帮助。我用下面的like作为参考。

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>

【问题讨论】:

    标签: javascript html


    【解决方案1】:

    是的,你是对的,这是因为&lt;form&gt;。 当您在输入框中按 enter 时,您的表单正在提交。 为避免这种情况,您可以在KeyPress() 函数中处理回车键后添加e.preventDefault();。像这样:

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

    【讨论】:

      猜你喜欢
      • 2013-10-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-11
      • 2023-02-05
      • 1970-01-01
      • 1970-01-01
      • 2022-11-29
      相关资源
      最近更新 更多