当输入键被按下时写入文本区域？

我有一个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>

来源

2010-09-09 Big Mo Fo

使用表单元素

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

来源

2010-09-09 14:58:57 BGerrissen

好的，这个工作。但是，在将文本写入textarea之后，页面立即刷新并且文本消失。 – 2010-09-09 15:02:01

啊然后你根本不想提交 – BGerrissen 2010-09-09 17:06:06

而是提交的，请尝试使用按键事件。当按下回车键时检测，复制数据，并取消事件（以防止表单提交）。如果您允许表单提交，它将简单地用表单发布的结果替换现有页面。

修改当前的代码：

<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这样的框架，并且不加引人注目地添加处理程序。

来源

2010-09-09 15:00:17 tvanfosson

这听起来像一个很好的方法......但我怎么去实现它呢？ – 2010-09-09 15:02:36

@Big - 我添加了一个例子。 – tvanfosson 2010-09-09 15:06:57

谢谢，这很好！基本上，我试图实现的是一个基本的终端类事物。我希望能够在输入框中输入内容，按回车键，让脚本读取它，通过if语句运行输入并根据输入内容输出内容。 – 2010-09-09 15:08:11

您可以使用jQuery

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

来源

2010-09-09 15:04:01 jcubic

这将做的工作。另外，你应该处理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);">

来源

2010-09-09 15:20:48

我完全忽略了这个答复，蒂姆，但这完全是我想要的那种基础。经过几个小时的其他回答后，我终于注意到了这篇文章，并将其插入。您是javascript神。任何人都可以推荐任何好的教程吗？我对python和CSS和xHtml的工作知识有一点了解。 – 2010-09-09 19:11:26

当输入键被按下时写入文本区域？

回答

相关问题