Copying text from one text box to another using java script

Question

I am hoping to get this fixed, so I have a textbox that's for initials and I want to copy that to the next 26 initial boxes so it's a bit easier for the user.

I want to do this on the Client-Side so I don't use up the performance on the server-side.

The issue I am having is that whenever I call the function that's supposed to copy the text over, somehow disables the textbox, I am unable to type anything in the textbox. Please see the code below, please let me know where I am going wrong!

     <script type="text/javascript">
        function copyText() {

            var UI = document.getElementById("txtinitialOriginal").value;

            document.getElementById("initial1").innerHTML = UI;
        }
    </script>
<input type="text" onkeypress="copyText(); return false" runat="server" id="txtinitialOriginal" style="font-size:20px"  /> 

 <asp:TextBox ID="initial1"  placeholder="Initial Here" style="float:right" runat="server"></asp:TextBox>

What am I doing wrong?

That's because your using innerHtml you should be setting the value instead. — Train
– Train, Commented Dec 11, 2019 at 21:34

Train · Accepted Answer · 2019-12-11 21:40:53Z

1

Using InnerHtml will not set the value of a text box. InnerHTML replaces the HTML inside of the input.

Try setting the textbox with this value

document.getElementById("initial1").value = UI;

or

document.getElementById("<%= initial1.ClientID %>").value = UI;

Edit:

Your textbox is disabled because you have

onkeypress="copyText(); return false"

you need to return true

edited Dec 11, 2019 at 21:40

answered Dec 11, 2019 at 21:36

Train

3,5363 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maxi Over a year ago

Hi there, thanks for replying, unfortunately, I did that as well, but the textbox its self becomes disabled, I can't type anything in the textbox where I want to copy the text from.

Maxi Over a year ago

Yup that worked, there is still one issue, when I type in something in the text box, the Initial1 textbox only copies over 1st letter, if I type in 3 letters it only copies over 2 letters, why is that?

Train Over a year ago

Because the value doesn't change until onkeypress is finished. Try another event like onchange or onKeyUp

Majdi Saibi Over a year ago

Use onKeyUp instead of onKeyPress keypress Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed. keyup Fires when the user releases a key, after the default action of that key has been performed.

Collectives™ on Stack Overflow

Copying text from one text box to another using java script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related