?
Solved

Make an Input type text all caps?

Posted on 2002-05-07
23
Medium Priority
?
318 Views
Last Modified: 2012-06-27
I have a field - call it Name - that when the user types a value into it, the value should be displayed as all capital letters.  How do I do that?

allie
0
Comment
Question by:allie
[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
  • 7
  • 6
  • 6
  • +2
23 Comments
 
LVL 11

Expert Comment

by:thunderchicken
ID: 6994314
???

in ASP...

<%
  name = "Hello"
  Response.write ucase(name)
%>
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6994469
You should be asking the JavaScript group this question...  

What you are trying to do is client-side control of a form field, probably using the UpperCase object;

object.toUpperCase( );

Maybe like this, it still requires a "submit";

<script language="javascript">
//--------------------------------------------------------
// setFieldsToUpperCase(input_object)
//   Sets value of form field toUpperCase() for all fields passed
//--------------------------------------------------------

function setFieldsToUpperCase() {
     for (var i=0; i<arguments.length; i++) {
          var obj = arguments[i];
          obj.value = obj.value.toUpperCase();
          }
     }
</script>

...

<TABLE WIDTH=100% BORDER=1 CELLSPACING=0 CELLPADDING=2>
<TR BGCOLOR="#eeeeee">
     <TD><TT>setFieldsToUpperCase(input_object)</TT></TD>
</TR>
<TR BGCOLOR="#ffffff">
     <TD>
     <INPUT NAME="setFieldsToUpperCase_1" SIZE=15> <INPUT NAME="setFieldsToUpperCase_2" SIZE=15> <INPUT TYPE="button" CLASS="button" NAME="setFieldsToUpperCase_3" VALUE="setFieldsToUpperCase()" onClick="setFieldsToUpperCase(document.forms[0].setFieldsToUpperCase_1,document.forms[0].setFieldsToUpperCase_2)">
     </TD>
</TR>
</TABLE>

Again, check with the JavaScript group to see if it can be done on a keystroke...
0
 
LVL 5

Accepted Solution

by:
raizon earned 200 total points
ID: 6994518
Use stylesheets.

<style>
input {font-variant: small-caps;}
</style>
0
Technology Partners: 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!

 
LVL 18

Expert Comment

by:mgfranz
ID: 6994563
I think he wants each letter to be converted to UCase when the key is stroked...

Sounds like a good DHTML project...
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6994571
Or;

<input type="text" name="myText" onKeyPress="changeVal()">

<script type="text/javascript" language="JavaScript">
s1 = new String(myForm.myText.value)

function changeVal() {
     s1 = "You pressed a key"
    myForm.myText.value = s1.toUpperCase()
}

</script>
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6994575
[damn I'm good...]  ;-)
0
 
LVL 5

Expert Comment

by:raizon
ID: 6994585
lol mgfranz

the style sheet will show the text as being uppercase.  So when the key is stroked you see an uppercase letter.
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6994592
Full code, (forgot the <form>)

<body>
<form action="" method="POST" id="myForm" >
<input type="text" name="myText" onKeyPress="changeVal()">

<script type="text/javascript" language="JavaScript">
s1 = new String(myForm.myText.value)

function changeVal() {
     s1 = "You pressed a key"
    myForm.myText.value = s1.toUpperCase()
}

</script>
</form>
</body>
0
 
LVL 6

Expert Comment

by:ebosscher
ID: 6994634
mgfranz, the problem with that solution is that it happens on keypress, or when the key goes down, what you would really need is a solution where it happened on keyup

here ya go:

<html>
<head>
<body>
<form name="FormName">
Enter your value here: <input type="text" onKeyUp="javascript:this.value = this.value.toUpperCase();">
</form>
</body>
</html>

similar, but different
0
 
LVL 2

Author Comment

by:allie
ID: 6994656
Got it!  I didn't want to use document level style sheets actually, since there's more than one field on the screen and I just needed that one field to be in caps.  But using your idea I did the following:

<style>
#caps {font-variant: small-caps;}
</style>
<input type="text" size="10" maxlength="10" name="UName" id="caps">

Works beautifully, thanks!!

allie
0
 
LVL 5

Expert Comment

by:raizon
ID: 6994662
:-)

Glad to help.
0
 
LVL 6

Expert Comment

by:ebosscher
ID: 6994901
so allie, you didn't actually need caps, what you really needed was for it to _look_ like caps?  Your data will still not be in caps that way... but I guess if that's what you want....
0
 
LVL 2

Author Comment

by:allie
ID: 6994991
ebosscher-

You must be a prophet!  Yeah, we just found that problem.  I thought it WAS in caps since that's how it appeared.  However, I already converted using the toUpperCase() function on submit.  Thanks!!

allie
0
 
LVL 5

Expert Comment

by:raizon
ID: 6995023
I have no objection to giving the points to ebosscher since it was his solution you ended up using.
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6995033
So in that case thunderchickens original comment would have been correct also...

Thanks for the help ebosscher.
0
 
LVL 2

Author Comment

by:allie
ID: 6995035
Actually, it wasn't... I used a combo of your's and mgfranz (since his was the first I saw with the toUppercase() function).  The code now looks like this:

<style>
#caps {font-variant: small-caps;}
</style>
<input type="text" size="10" maxlength="10" name="UName" id="caps">
<%
var sName= new String(Request("UName"));

//If filled out page is being loaded, process
if( sName!= "" && sName!= "undefined")
   sName = new String(sName.toUpperCase());
//Some other code
%>

However, if anyone feels that someone else should get some points I'm open to that idea.  Thanks to everyone for all your help though!!

allie


0
 
LVL 5

Expert Comment

by:raizon
ID: 6995071
since you are not using my solution.  It would not be fair to the other experts here who's solution/combination of solutions you are using.


my apologies to allie, I forgot to mention that since my solution was w/style sheets that it was only appearance would be capitalized.

0
 
LVL 18

Expert Comment

by:mgfranz
ID: 6995104
A split would be appropriate...
0
 
LVL 5

Expert Comment

by:raizon
ID: 6995116
allie,

You'll probably want to post a 0 point question in community support with a reference to this question, and what you would like to do.

0
 
LVL 6

Expert Comment

by:ebosscher
ID: 6995564
Look,

Some day, when I'm short on points, or I mess up giving an answer just forgive me the oversight and I'm happy..  I'm not here for the points.. I'm here for the help.

I say leave it the way it was, or give it to mgfranz and raizon (mgfranz and my answers were very similer, and he posted first)

Cheers
0
 
LVL 2

Author Comment

by:allie
ID: 6996331
*Grin*  Everyone's so accomodating... OK, here's what I'll do - I'm going to post in ComSupport and ask them to split the points on this question between raizon and mgfranz.  In the meantime, I'm going to post just a question here "Points for ebosscher".  That way since all three of you helped, you all get something for it.  I really do appreciate your efforts guys.  Thanks!!

allie
0
 
LVL 2

Author Comment

by:allie
ID: 6996338
On second thought, I'll just let comSupport do it all... that way I know it all gets done right!  Thanks!

allie
0
 
LVL 2

Author Comment

by:allie
ID: 7001289
OK guys, here's what we're doing - I'm going to post 25 point "questions" here for ebosscher and mgfranz.  Go ahead and post an "answer" and the points will transfer to you.  Thanks for your help!

allie
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

752 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