HTML Textbox Input in All Caps?

Hello, I am working on a CAPTCHA as part of a MOD for phpBB2, and everything is going just right. I have one more thing, though. How would it be possible to make it so when the user types in the text box any letters are capitalized? The CAPTCHA has all numbers and letters except for 0, 1, I, and O (for confusion preventions). Thanks in advance.
LVL 1
X-Fi6Asked:
Who is Participating?
 
ncogneatoCommented:
I usually do this using CSS, or if you want a quick fix, you can do so with the style attribute, like so:

<input type="text" name="userkey" size="20" maxlength="18" style="text-transform:uppercase;" />

and then to really ensure that you also get all caps letters upon submission, you can make use of the javascript code that's being suggested by X-Fi6.
0
 
dankuckCommented:
Chances are, you don't care whether they are all caps until you actually submit.

On your form you can add an onsubmit to call a function something like this:

function setCAPTCHAToAllCaps(){
    var captcha = document.getElementById("captcha");
    captcha.value = captcha.value.toUpperCase();
}

This assumes your captcha <input> field has id="captcha" and your <form> has something like onsubmit="setCAPTCHAToAllCaps(); return true;".

However, it's much more useful to change the text to all caps on the server-side, just in case a user has JavaScript turned off.

There's also the option of using onkeypress to change users' input as they type.  I'll describe this if you still want it.
0
 
X-Fi6Author Commented:
I will be using it server-side as well, but in addition to that I want it done through JavaScript because it will all flow nicely that way.

I have already made it so on keyup it checks to see whether the key is right or not (I am aware of the security flaw here but the way I have designed it means a bot will not know where to check for the code) and make an image glow if it's correct.

If you can make it compatible with this then thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
dankuckCommented:
In that case, you could use the same setCAPTCHAToAllCaps() function as part of the onkeyup event.  However, that would lead to a bad user experience because the cursor would always go to the beginning or end of the textbox after typing (in some browsers).

A better option might be to use toUpperCase() in the code to your image-glowing function.

If your code was:

checkCAPTCHAIsCorrect(captcha.value);

then it could be this instead:

checkCAPTCHAIsCorrect(captcha.value.toUpperCase());
0
 
X-Fi6Author Commented:
This is the code I have made myself so far:

<html>
<head>
<script type="text/javascript">
function checkkey()
{
      actform.userkey.value = actform.userkey.value.toUpperCase();
      var checkkey = actform.userkey.value;
      if(checkkey == "XXXXXXX")
      {
            document.getElementById("keys").innerHTML='<img src="key1.gif" width="20" height="30" hspace="3" />';
      }
      else
      {
            document.getElementById("keys").innerHTML='<img src="key0.gif" width="20" height="30" hspace="3" />';
      }
}
//-->
</script>
</head>
<body>
<form name="actform" action="actform.php" method="post">
<input type="text" name="userkey" size="20" maxlength="18" /><div id="keys"><img src="key0.gif" width="20" height="30" hspace="3" /></div><br /><input type="submit" value="Activate" /></form>
</body>
</html>

But it doesn't capitalize until the key is released. I tried onkeydown but that doesn't capitalize it until it gets to the next letter. I tried onkeypress but it's the same. And I tried onchange but that doesn't capitalize it until you click away from the textbox.

Any ideas?
0
 
X-Fi6Author Commented:
Nevermind, I changed actform.userkey.value = actform.userkey.value.toUpperCase(); to setTimeOut("actform.userkey.value = actform.userkey.value.toUpperCase();", 1); and that made onkeydown work. Yeah, I got it to work. Thanks anyways.
0
 
dankuckCommented:
ncogneato is right to mention that the CSS is only visual.  The actual value will be in whatever casing that the user types in.
0
 
X-Fi6Author Commented:
Thanks, ncogneato! I don't care if it's still lowercase, though, because I'm still going to take care of it through JavaScript and PHP as well. Your solution is just what I was looking for!

Overall code:

function checkkey()
{
      if(actform.userkey.value == "XXXXXXX")
      {
            var keyid = 1;
      }
      else
      {
            var keyid = 0;
      }
      document.getElementById("keys").innerHTML='<img src="key' + keyid + '.gif" width="20" height="30" alt="Invalid" title="Invalid Key" align="middle" hspace="3" />';
}
<form name="actform" action="blahblahblah.php" method="post">
<input name="userkey" type="text" size="20" maxlength="7" style="text-transform:uppercase;" onkeyup="checkkey()" />
<span id="keys"><img src="key0.gif" width="20" height="30" alt="Invalid" title="Invalid Key" align="middle" hspace="3" /></span>
<br /><input type="submit" value="Register" /></form>

It works flawlessly! Thanks, ncgoneato!
0
 
ncogneatoCommented:
You're most welcome X-Fi6. Glad to be of help. :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.