webentwicklung-frage-antwort-db.com.de

Beim Eingeben eines Texteingabefelds den in einem Div eingegebenen Inhalt drucken

Ich habe eine Website, auf der sich ein leeres Feld und ein Eingabetextfeld befinden. Ich möchte etwas in dieses Eingabefeld eintippen und auf das leere Feld drucken lassen.

HTML

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

welches ist die leere Box und

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

welches ist das Eingabefeld.

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

Wenn mir jemand sagen könnte, wie ich das machen soll, wäre ich sehr dankbar. Vielen Dank

10
ctm

Sie verwenden das Ereignis onkeyup

Das Suchen mit IDs ist viel einfacher. Fügen Sie Ihren Elementen IDs wie folgt hinzu:

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

Hier ist ein Live-Beispiel

26
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

Es gibt viele Möglichkeiten, dies zu erreichen. Die einfachste Möglichkeit ist die Verwendung von jQuery. Im folgenden Beispiel verwende ich die jQuery-Funktion keyUp(), um auf Tastaturereignisse zu hören, und schreibe dann den aktualisierten Wert in den Code .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>

Ich habe hier ein Arbeitsbeispiel veröffentlicht: http://jsbin.com/axibuw/1/edit

2
Mike Grassotti

In Ihrem HTML-Code

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

Klicken Sie hier für LIVE DEMO

1
Ritam Das