web-dev-qa-db-ja.com

テキスト入力フィールドに入力しているときに、divに入力されたコンテンツを印刷する

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

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

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

javascripthtmlcssinput
15
ctm

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

これが 実例 です

28
nunespascal

http://jsfiddle.net/3kpay/

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

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

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

2
Mike Grassotti

あなたの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;
}

LIVEデモはこちら

1
Ritam Das