?
Solved

upperCase function using onKeyUp event handler

Posted on 2003-03-19
13
Medium Priority
?
1,655 Views
Last Modified: 2008-02-01
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
Comment
Question by:atessier
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 4
13 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8167531
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
 
LVL 1

Expert Comment

by:Antithesis
ID: 8167561
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
 

Author Comment

by:atessier
ID: 8168286
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8168377
I am pretty certain that you will have to use the onChange() or onBlur().

Fritz the Blank
0
 
LVL 1

Expert Comment

by:Antithesis
ID: 8168719
Try using onkeypress instead, I'm almost certain that ignores everything except the alphanumeric keys.
0
 
LVL 1

Accepted Solution

by:
Antithesis earned 200 total points
ID: 8168840
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
 

Author Comment

by:atessier
ID: 8169053
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8169076
for each of your text boxes, do it this way:

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

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8169082
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
 
LVL 1

Expert Comment

by:Antithesis
ID: 8169147
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8169166
I would recommend having name tags on all of your controls anyway.

Fritz the Blank
0
 

Author Comment

by:atessier
ID: 8173391
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
 

Author Comment

by:atessier
ID: 8181069
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question