18

空のボックスと入力テキストボックスがあるWebサイトがあります。その入力ボックスに何かを入力して、空のボックスに印刷できるようにしたいと思います。

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

誰かがこれを行う方法を教えてくれたら、私はそれを大いに感謝します。ありがとう

4

5 に答える 5

37

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

ここにライブの例があります

于 2013-01-19T05:08:32.627 に答える
3

http://jsfiddle.net/3kpay/

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

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
于 2013-01-19T05:12:30.263 に答える
2

これを行うには多くの方法がありますが、おそらく最も簡単なのは 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>

ここに実際の例を投稿しました：http://jsbin.com/axibuw/1/edit

于 2013-01-19T05:23:09.747 に答える
-1

Angular JS はこれを 2 行のコードで行います。

他のライブラリをインポートするように、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>

これは私が今まで見つけた中で最高の解決策です!

于 2016-04-10T20:26:58.663 に答える