Wie getippt Artikel in einem Textfeld in ein anderes Textfeld oder Div in asp.net und Javascript?

Question

Ich möchte die Daten von einem Textfeld in ein anderes Textfeld für die Vorschau anzeigen. Die Daten müssen auf derselben Seite, aber in einem anderen Textfeld oder Div gleichzeitig mit den Zeichen in der ersten Textbox angezeigt werden. Hier ist, was ich versuche, aber es funktioniert nicht, mein Ziel zu erreichen:

Asp.net:

<asp:TextBox ID="txtCustomWord" runat="server" Width="300px" ClientIDMode="Static" 
    placeholder="Enter your custom word (11 Characters)" MaxLength="11" 
    onkeyup="show(document.getElementById('txtCustomWord').value);"></asp:TextBox> 

Javascript:

function show(text) { 
    document.getElementById("text").innerHTML = text; 
} 

Answer 1

Passing Things Entlang

Gerade this.value im Wert zu übergeben verwenden von Ihrem aktuelles Element, um die Dinge zu vereinfachen und zu vermeiden, dass Sie einen vollständigen Verweis auf Ihren Kurs eingeben müssen nt Element:

onkeyup="show(this.value);"> 

Dann je nach Art des Elements, sollten Sie den Wert entsprechend einzustellen. Wenn es ein <div> ist, sollten Sie die innerHTML Eigenschaft verwenden, um den Wert zu setzen, sonst werden Sie wollen value verwenden, wenn es sich um eine <input> ist:

function show(text) { 
    // Use innerHTML for <div> elements, use value for <input> elements 
    document.getElementById('text').innerHTML = text; 
} 

Beispiel

Sie können alle notwendigen Code siehe dazu weiter unten zu produzieren:

<form id="form1" runat="server"> 
    <asp:TextBox ID="txtCustomWord" runat="server" Width="300px" ClientIDMode="Static" placeholder="Enter your custom word (11 Characters)" MaxLength="11" onkeyup="show(this.value);"></asp:TextBox> 
    <div id="text"></div> 
</form> 
<script> 
    function show(text) { 
     document.getElementById('text').innerHTML = text; 
    } 
</script> 

Sie können see an interactive example of the rendered markup this generates here und ein Beispiel davon unten in Aktion:

Answer 2

Im Einzelnen: (Javascript-Funktion)

var inputs= document.getElementById("txtCustomWord"); 
    inputs.onkeyup = function(){ 

    document.getElementById('text').innerHTML=inputs.value; 
    } 

Und entfernen Sie das Onkeyup-Ereignis aus Ihrem Textfeld selbst.

Hier ist ein Link zu einer sehr ähnlichen Frage. Ich denke, es wird Ihre Probleme ansprechen.

Ich habe versucht, ein anderes Ereignis (onchange) zu verwenden, aber das gilt nicht, wenn Sie noch den Fokus auf das Textfeld haben.

While typing in a text input field, printing the content typed in a div

Answer 3

Sie sollten die ClientID des asp:TextBox verwenden ihren Wert in JavaScript zuzugreifen: die Methodensignatur für show() wird wie folgt sein: Lassen <Div id="DisplayDiv"></Div> die div sein, in dem wir den Inhalt angezeigt werden soll;

function show() { 
     var TextObject = document.getElementById('<%= txtCustomWord.ClientID %>'); 
     if(TextObject != null) 
     document.getElementById('DisplayDiv').innerHTML =TextObject.value; 
    } 

Answer 4

Da Sie jQuery-Tag verwendet, ist hier eine Lösung mit dem

$('#txtCustomWord').keyup(function(){ 
    $('#txtDisplay').val($(this).val()); 
}); 

https://jsfiddle.net/45z0a32w/1/