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

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.
0
X-Fi6
Asked:
X-Fi6
  • 4
  • 3
  • 2
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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:
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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