Question

我有一个处理输出的textarea和一个处理用户输入的文本字段。

焦点将完全在输入字段上。我不能这样做，以便用户输入字段将在提交表单时添加文本（按下输入键）。它只有在有一个按钮并且单击它时才有效。我该如何解决这个问题？

以下是我正在尝试输入密钥提交的代码。

<html>
<head>
<script type="text/javascript">
  function addtxt(input) {
    var obj=document.getElementById(input)
    var txt=document.createTextNode("blah blah")
    obj.appendChild(txt)
  }
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onSubmit="addtxt('textarea1');">
</body>
</html>

Answer 1

这将完成这项工作。此外，您应该处理textarea的value属性而不是向其添加文本节点：如果用户完全更改了textarea的值，则之后更改其子节点将不起作用。如果您希望textarea为只读，请添加readonly属性：<textarea id="textarea1" readonly></textarea>。

<script type="text/javascript">
    function inputKeyDown(evt, input) {
        if (evt.keyCode == 13) {
            var textarea = document.getElementById("textarea1");
            textarea.value += "\n" + input.value;
            input.value = ""; // I'm guessing you may want this
            return false;
        }
    }
</script>

<input type="text" onkeydown="return inputKeyDown(event, this);">

Answer 2

请尝试使用按键事件，而不是提交。检测何时按下回车键，复制数据并取消事件（以防止表单提交）。如果您允许表单提交，则只需使用表单帖子的结果替换现有页面。

修改您当前的代码：

<html> 
<head> 
<script type="text/javascript"> 
  function addtxt(e,ctl,input) {
    var key;
    if (window.event) {
       key = event.keyCode;
    } else {
       key = e.which;
    }
    if (key == 13) {
       var obj=document.getElementById(input);
       var txt=document.createTextNode("blah blah");
       obj.appendChild(txt);
       ctl.value = '';
       return false;
    }
    return true;
  } 
</script> 
</head> 
<body> 
<textarea id="textarea1"></textarea> 
<br><input type="text" onkeypress="return addtxt(event,this,'textarea1');"> 
</body> 
</html>

请注意，可能有更好的方法来实现您的最终目标，但由于您没有说明这是什么，这是我能做的最好的。另外，我肯定会考虑使用像jQuery / Dojo / Prototype这样的框架，并且不加引人注意地添加处理程序。

Answer 3

使用表单元素

<form onsubmit="addtxt('textarea1')">
    <textarea id="textarea1"></textarea>
    <br><input type="text" />
</form>

Answer 4

您可以使用JQuery

$('textarea#textarea1').keypress(function(e) {
    if (e.keyCode == 13) { // enter
       //do some stuff
    }
});

按下回车键时写入textarea？

4 个答案: