• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1708
  • Last Modified:

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
0
atessier
Asked:
atessier
  • 5
  • 4
  • 4
1 Solution
 
fritz_the_blankCommented:
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
0
 
AntithesisCommented:
Try putting "return true;" in it:
----------
onkeyup="javascript:this.value=this.value.toUpperCase();return true;"
----------
returning true will let the browser do its thing ;-) .
0
 
atessierAuthor Commented:
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Fritz the Blank
0
 
AntithesisCommented:
Try using onkeypress instead, I'm almost certain that ignores everything except the alphanumeric keys.
0
 
AntithesisCommented:
OK, that's not working.  For some reason or another, it's leaving the last letter lowercase.  I made a solution, it waits 20 milliseconds after the key press and changes the value of the textbox:
----------
<script language="javascript">
function getobj(g_elm)  {
     if (document.all) return document.all[g_elm];
     if (document.layers) return document.layers[g_elm];
     if (!document.all && document.getElementById) return document.getElementById(g_elm);
}
function fixit(f_elm)  {
     setTimeout('fixit2("' +f_elm+ '")', 20);
}
function fixit2(f_el2)  {
     getobj(f_el2).value = getobj(f_el2).value.toUpperCase();
}
</script>
<input type="text" id="tbox" onkeypress="fixit('tbox')">
----------
You can change the ID to suit your own needs.
0
 
atessierAuthor Commented:
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!
0
 
fritz_the_blankCommented:
for each of your text boxes, do it this way:

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

Fritz the Blank
0
 
fritz_the_blankCommented:
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
0
 
AntithesisCommented:
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.
0
 
fritz_the_blankCommented:
I would recommend having name tags on all of your controls anyway.

Fritz the Blank
0
 
atessierAuthor Commented:
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.  

0
 
atessierAuthor Commented:
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
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now