如何在asp.net C＃中将文本框文本更改为另一个文本框？

Question

I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event. I have tried some code for achieve this but not able to get the textbox1 value on textbox2.

My Code is:

<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()"  ></asp:TextBox>

Script code is:

function copyText() {

var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName =  givenName;

} 

but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this? (Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)

Thanks.

I got the exact answer for this feature by using below mentioned script code. Solution:

function OneTextToOther() {

        var first = document.getElementById('<%= txtGivenName.ClientID %>').value;

        document.getElementById('<%= txtDisplayName.ClientID %>').value = first;

    }  

Answer 1

Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.

You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.

function copyText() {
    var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
    var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
    displayName.value =  givenName.value;
} 

Answer 2

You can try keyup event but I know only Jquery method to do it.

<input class="one" type="text"/>
<input class="two" type="text"/>

$(".one").on("keyup", function(){
$(".two").val($(".one").val()); 
});

here is the demo: http://jsfiddle.net/pUpZA/

PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes