我有一个网站，那里有一个空框和输入文本框。 我希望能够在输入框中键入的东西，有它可以在空箱印刷。
<div class='printchatbox'></div>
这是空盒和
<input type='text' name='fname' class='chatinput'>
这是输入框。
.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%;}
如果有人能告诉我如何做到这一点我将不胜感激。 谢谢
您可以使用onkeyup事件
与IDS搜索是一个容易得多。 IDS添加到您的内容如下：
<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;
}
这是一个活生生的例子
http://jsfiddle.net/3kpay/
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput'
onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
有很多方法来完成这件事，可能是最简单的就是使用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
在你的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;
}
点击此处查看现场演示
角JS做到这一点的两行代码：
只需导入在导入其他库角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>
这是我所发现的最好的解决方案！
