While typing in a text input field, printing the c

2019-01-31 10:09发布

站内问答 / JavaScript
845 5 4

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

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

which is the empty box and

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

which is the input box.

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

5条回答
ゆ 、 Hurt°
2楼-- · 2019-01-31 10:39

Angular JS does this in two lines of code :

Just import Angular JS as you import other libraries :

<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):

<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 !

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2019-01-31 10:45

You use the onkeyup event

Searching with ids is a lot easier. Add ids to your elements as follows:

<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;
}

Here is a Live example

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
4楼-- · 2019-01-31 10:51

http://jsfiddle.net/3kpay/

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

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
查看更多
0人赞 添加讨论(0) 举报
傲
5楼-- · 2019-01-31 10:58

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

<!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

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
6楼-- · 2019-01-31 10:59

In your HTML,

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

In JS,

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

Click here for LIVE DEMO

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)