asked on

upperCase function using onKeyUp event handler

I am using the upperCase function using the onKeyUp event handler for a textbox on my html page. Here is an example of the code which does work: onKeyUp="javascript:this.value=this.value.toUpperCase();"
The problem I'm having is that after you type in some letters and you want to go back to edit a letter. Using the backspace works fine and holding down the left arrow key will work but there is a limitation in using the left arrow key. I want to be able to press the left arrow key down once, twice, or as many times as I need but when I try this it takes me back to the end of the line (after all the characters I have typed in).

Does anyone know of anyway to get this to work and I don't want to use the onsubmit, onfocus, or onblur if I don't have to.

-Andrew

fritz_the_blank

I find that you are best using onChange for this sort of thing. Otherwise, you'll always have some problem or another.

Fritz the Blank

Antithesis

Try putting "return true;" in it:
----------
onkeyup="javascript:this.value=this.value.toUpperCase();return true;"
----------
returning true will let the browser do its thing ;-) .

atessier

ASKER

Adding the "return true;" did not work but thanks for the suggestion. I could use onchange but my intent was to have the upperCase take effect when the user type into the text box. I don't know if there is anything else that can be done for this or just settle for one of these other event handlers.

Please reply if you can help.

fritz_the_blank

I am pretty certain that you will have to use the onChange() or onBlur().

Fritz the Blank

Antithesis

Try using onkeypress instead, I'm almost certain that ignores everything except the alphanumeric keys.

ASKER CERTIFIED SOLUTION

Antithesis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

atessier

ASKER

Antithesis, what you have worked great. Being a beginner I can't understand very good though. The only problem I'm having with it is I have 3 textboxes on the same page. How can this work on each one with the code you gave me? Thanks, man!

fritz_the_blank

for each of your text boxes, do it this way:

<input type="text" id="tbox" onkeypress="fixit('this.name)">

Fritz the Blank

fritz_the_blank

Oops, that should be:

<input type="text" id="tbox" onkeypress="fixit(this.name)">

The idea is that this.name will pass the name of the textbox to the function.

Fritz the Blank

Antithesis

Maybe you should use an attribute that actually exists :-P
----------
<input type="text" id="tbox1" onkeypress="fixit(this.id)">
<input type="text" id="tbox2" onkeypress="fixit(this.id)">
----------
Just make sure that all the textboxes have unique IDs. And thanks for the idea fritz, that's a much simpler way of going about it.

fritz_the_blank

I would recommend having name tags on all of your controls anyway.

Fritz the Blank

atessier

ASKER

This answer along with one following comment solved my problem. I do appreciate it.

Here is the second part of the answer which resolves having multiple textboxes on the same page:

Maybe you should use an attribute that actually exists :-P
----------
<input type="text" id="tbox1" onkeypress="fixit(this.id)">
<input type="text" id="tbox2" onkeypress="fixit(this.id)">
----------
Just make sure that all the textboxes have unique IDs.

atessier

ASKER

Antithesis,
Thanks for your help. The only thing that is not working is when I hit the left arrow button to edit a character I have put in and when I press the key to add a character it takes me to the end of the line automatically. Any idea on how to solve this minor issue for editing.
-Andrew