在文本输入字段中键入时，打印在 div 中键入的内容答案

【问题标题】：While typing in a text input field, printing the content typed in a div在文本输入字段中键入时，打印在 div 中键入的内容
【发布时间】：2013-01-02 21:21:46
【问题描述】：

我有一个网站，其中有一个空框和一个输入文本框。我希望能够在该输入框中输入一些内容并将其打印在空框中。

HTML

<div class='printchatbox'></div>

这是一个空盒子和

<input type='text' name='fname' class='chatinput'>

这是输入框。

CSS

.printchatbox 
    {border-width:thick 10px;border-style: solid; 
    background-color:#fff;
    line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
    border: 3px solid #969293;width:40%;}

如果有人能告诉我如何做到这一点，我将不胜感激。谢谢

【问题讨论】：

还有其他更优雅的方法吗？只是想获得最好的选择。

标签： javascript html css input

【解决方案1】：

您使用onkeyup 事件

使用 id 搜索要容易得多。将 id 添加到您的元素中，如下所示：

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' id='chatinput'>

JS

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

这是Live example

【讨论】：

<div> 和<input> 标签都没有id 属性，所以先给它。
@t_motooka 谢谢，我忘了说我添加了 ID。
@nunespascal 感谢您的解决方案。但是，我发现当我们在启用了编辑器（在我的例子中为 SimpleMDE）的文本区域上使用它时，这不起作用。

【解决方案2】：

http://jsfiddle.net/3kpay/

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />

【讨论】：

【解决方案3】：

有很多方法可以做到这一点，可能最简单的方法是使用 jQuery。在下面的示例中，我使用 jQuery keyUp() 函数来监听键盘事件，然后将更新后的值写入 .printChatBox

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>

  <div class='printchatbox'>CHANGE ME</div>
  <input type='text' name='fname' class='chatinput'>

<script type="script/javascript">
  $('.chatinput').keyup(function(event) {
    newText = event.target.value;
    $('.printchatbox').text(newText);
  });
</script>
</body>
</html>

我在这里发布了一个工作示例：http://jsbin.com/axibuw/1/edit

【讨论】：

我认为上面的脚本有问题。

【解决方案4】：

在您的 HTML 中，

<div id='printchatbox'></div>
<br>
<input type='text' id='fname' class='chatinput' onkeyup="annotate()">

在 JS 中，

function annotate(){
  var typed= document.getElementById("fname").value;
  document.getElementById("printchatbox").innerHTML= typed;
}

Click here for LIVE DEMO

【讨论】：

【解决方案5】：

Angular JS 用两行代码做到这一点：

只需在导入其他库时导入 Angular JS：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">

然后，在你的第一个 div 上（你从哪里复制）：

<input type="text" ng-model="myID"> </input>

然后，在您将显示内容的地方：只需写：

<div> {{myID}}</div>

这是我找到的最好的解决方案！

【讨论】：

不要仅仅为了响应事件而导入整个 SPA。确保您没有添加不需要添加的库。如果您已经在开发单页应用程序，那很好，但是对于这个；太过分了。
@joshua.thomas.bird 你是对的。只为一项任务添加整个库不是一个好主意。