Solved

Make an Input type text all caps?

Posted on 2002-05-07
23
312 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 50 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
If-Then-Else ASP problem 6 72
Obtain data from database .mdb 4 31
Asp in server side with Mssql Server 7 4 34
ASP Classic, check if Querystring is UCase or LCase 8 29
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…
Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

730 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