Javascript 在文本输入字段中键入时，打印在 div 中键入的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14411235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
While typing in a text input field, printing the content typed in a div
提问by ctm
I have a website where there is a empty box and a input text box. I want to be able to type something in that input box and have it be printed on the empty box.
我有一个网站，其中有一个空框和一个输入文本框。我希望能够在该输入框中键入内容并将其打印在空框中。
HTML
HTML
<div class='printchatbox'></div>
which is the empty box and
这是空盒子和
<input type='text' name='fname' class='chatinput'>
which is the input box.
这是输入框。
CSS
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%;}
If anyone could tell me how to do this I would greatly appreciate it. Thanks
如果有人能告诉我如何做到这一点，我将不胜感激。谢谢
回答by nunespascal
You use the onkeyupevent
您使用该onkeyup事件
Searching with ids is a lot easier. Add ids to your elements as follows:
使用 id 搜索要容易得多。将 id 添加到您的元素中，如下所示：
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput' id='chatinput'>
JS
JS
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
Here is a Live example
这是一个实时示例
回答by codingbiz
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput'
onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
回答by Mike Grassotti
There are many ways to get this done, possibly the easiest is to use jQuery. In the example below I am using the jQuery keyUp()function to listen for keyboard events, then writing the updated value to the .printChatBox
有很多方法可以做到这一点，可能最简单的方法是使用 jQuery。在下面的示例中，我使用 jQuerykeyUp()函数来侦听键盘事件，然后将更新后的值写入.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>
I've posted a working example here: http://jsbin.com/axibuw/1/edit
我在这里发布了一个工作示例：http: //jsbin.com/axibuw/1/edit
回答by Ritam Das
In your HTML,
在您的 HTML 中，
<div id='printchatbox'></div>
<br>
<input type='text' id='fname' class='chatinput' onkeyup="annotate()">
In JS,
在JS中，
function annotate(){
var typed= document.getElementById("fname").value;
document.getElementById("printchatbox").innerHTML= typed;
}
回答by Sandip Subedi
Angular JS does this in two lines of code :
Angular JS 在两行代码中做到这一点：
Just import Angular JS as you import other libraries :
只需在导入其他库时导入 Angular JS：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
Then, on you first div (where you are copying from):
然后，在你的第一个 div （你从哪里复制）：
<input type="text" ng-model="myID"> </input>
Then, on the place where you will show the content : just write :
然后，在您将显示内容的地方：只需写下：
<div> {{myID}}</div>
This is the best solution I have ever found !
这是我找到的最好的解决方案！
