How to show typed item in a textbox into another textbox or div in asp.net and javascript?

Question

I want to show the data of one textbox into another textbox for preview purposes. The data needs to be visible in the same page but inside another textbox or div at the same time the user types in the characters inside the first textbox. Here is what I am trying, but it is not working to achieve my goal:

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 Along

Just use this.value to pass in the value from your current element to simplify things and avoid having to pass in a complete reference to your current element :

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

Then depending on the type of element, you'll want to set the value accordingly. If it is a <div> , you'll want to use the innerHTML property to set the value, otherwise, you'll want to use value if it is an <input> :

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

Example

You can see all of the necessary code to produce this below :

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

You can see an interactive example of the rendered markup this generates here and an example of it in action below :

Answer 2

Since you used jQuery tag, here is a solution with that

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

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

Answer 3

Specifically:(Javascript function)

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

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

And remove the onkeyup event from your textbox itself.

Here's a link to a very similar question. I think it will address your problems.

I tried to use a different event (onchange) but that doesn't apply when you still have focus to the textbox.

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

Answer 4

You should use the ClientID of the asp:TextBox to access their value in JavaScript: the method signature for show() will be like the following: Let <Div id="DisplayDiv"></Div> be the div in which we want to display the content;

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