PDA

View Full Version : auto capitalize textbox



jpaulraj
07-12-2006, 05:57 PM
I need a javascript that can auto capitalize the first character of the textbox. ie, if the name entered is john, once the focus is cleared, it should become John.

Something similar to this code - http://www.pengoworks.com/workshop/js/mask/

Please help.

shachi
07-12-2006, 06:50 PM
Here ya go:



<html>
<head>
<script type="text/javascript">
function capitalize(form) {
value = form.value;
newValue = '';
value = value.split(' ');
for(var i = 0; i < value.length; i++) {
newValue += value[i].substring(0,1).toUpperCase() +
value[i].substring(1,value[i].length) + ' ';
}
form.value = newValue;
}
</script>
</head>
<body>
<form name="testform">
<input type="text" name="testinput" onBlur="capitalize(this)">
</form>
</body>
</html>

Twey
07-12-2006, 06:55 PM
<script type="text/javascript">
String.prototype.toTitleCase = function() {
var words = this.split(" ");
for(var i = 0; i < words.length; ++i)
words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1).toLowerCase();
return words.join(" ");
};
</script>

<input type="text" onblur="this.value = this.value.toTitleCase();">
/EDIT: Drat, beaten to it :p

jr_yeo
07-12-2006, 07:02 PM
/EDIT: Drat, beaten to it :p

there....there..... its ok....this is not a popularity contest nor a "first come first put to use" contest :p at least jpaulraj has an option to choose :D he he :p

shachi
07-12-2006, 07:29 PM
Yes Twey, we are not in a warfare. The best thing is the script should work and both our scripts work!!!:)

EDIT: Twey by the way did you realize that both our scripts use almost the same principal. ;)

Twey
07-12-2006, 07:38 PM
Yes Twey, we are not in a warfare.Of course not, it's just irritating to post something you thought was highly relevant and helpful and then find out that someone else has already done so :p Not their faul, of course.
Twey by the way did you realize that both our scripts use almost the same principal.Of course, there's basically only one way to achieve this.

Watch the globals, by the way (gah, now that sounds like I'm vying for points -- just a tip :p)

jpaulraj
07-12-2006, 07:42 PM
thanks a million folks.. you all made my day.. truly appriciate the help.

jpaulraj
07-12-2006, 07:48 PM
just one more stuff :) i used the ssn mask from this site -

http://dotnetjunkies.com/WebLog/feelexit/archive/2004/06/23/17365.aspx

when i type a number 123456789 it masks it to 123-45-6789 that's perfect. Now i need to know if a user can enter just 4 digits of his ssn (last 4) so that the textbox should look like '- - 6789' (prepending it with two dash's if just 4 digits entered, if 9 digits entered then format the whole thing)

Thanks again.

shachi
07-13-2006, 06:47 AM
Of course not, it's just irritating to post something you thought was highly relevant and helpful and then find out that someone else has already done so :p Not their faul, of course.Of course, there's basically only one way to achieve this.

Watch the globals, by the way (gah, now that sounds like I'm vying for points -- just a tip :p)

Yea, I agree that's kinda embarrasing.

jpaulraj
07-13-2006, 06:18 PM
just one more stuff :) i used the ssn mask from this site -

http://dotnetjunkies.com/WebLog/feelexit/archive/2004/06/23/17365.aspx

when i type a number 123456789 it masks it to 123-45-6789 that's perfect. Now i need to know if a user can enter just 4 digits of his ssn (last 4) so that the textbox should look like '- - 6789' (prepending it with two dash's if just 4 digits entered, if 9 digits entered then format the whole thing)

Thanks again.

Can anyone please help...

shachi
07-13-2006, 06:59 PM
Can anyone please help...
It does not work with firefox, uses ie's event listener. If you need a cross browser version then I may take a look at the code if not then I fear I cannot help you.(Though I have IE(ies4lin) I cannot help you because it shows text all garbled up).

Twey
07-13-2006, 07:04 PM
shachi, you got ies4lin working? I never did.

jpaulraj
07-13-2006, 07:12 PM
shachi, can you pls post the script that works for IE?

Thanks

shachi
07-14-2006, 11:25 AM
shachi, you got ies4lin working? I never did.
yep, that was far more easy but unforunately I don't have all the fonts.:(


shachi, can you pls post the script that works for IE?

That scripts *WORKS* in IE not in firefox. If you want it to be crossbrowser then I can take a look and try to solve your problem.

shachi
07-14-2006, 11:45 AM
Is this what you want??:



<HTML>


<HEAD>


<TITLE> Javascript Edit Mask Sample </TITLE>


<script type="text/javascript" language="javascript">
// Javascript Numeric EditMask
// Written By John McGlothlin - Patoooey@optonline.net
// April 7th, 2004
//
// simple RegEx patterns to make life easy.
var reOneOrMoreDigits = /[\d+]/;
var reNoDigits = /[^\d]/gi;
function doMask(textBox) {
var keyCode = event.which ? event.which : event.keyCode;
// enter, backspace, delete and tab keys are allowed thru
if(keyCode == 13 || keyCode == 8 || keyCode == 9 || keyCode == 46)
return true;
// get character from keyCode....dealing with the "Numeric KeyPad"
// keyCodes so that it can be used
var keyCharacter = cleanKeyCode(keyCode);
// grab the textBox value and the mask
var val = textBox.value;
var mask = textBox.mask;
// simple Regex to check if key is a digit
if(reOneOrMoreDigits.test(keyCharacter) == false)
return false;
// get value minus any masking by removing all non-numerics
val = val.replace(reNoDigits,'');
// add current keystroke
val += keyCharacter;
// mask it...val holds the existing TextBox.value + the current keystroke
textBox.value = val.maskValue(mask);
setCaretAtEnd(textBox);
return false;
}
// puts starting chars in field
function onFocusMask(textBox) {
var val = textBox.value;
var mask = textBox.mask;
if(val.length == 0 || val == null) {
var i = mask.indexOf('#');
textBox.value = mask.substring(0,i);
}
setCaretAtEnd(textBox);
// set just in case.
textBox.maxlength = mask.length;
}
// blank field if no digits entered
function onBlurMask(textBox) {
var val = textBox.value;
// if no digits....nada entered.....blank it.
if(reOneOrMoreDigits.test(val) == false) {
textBox.value = '';
}
}
String.prototype.maskValue = function(mask) {
var retVal = mask;
var val = this;
//loop thru mask and replace #'s with current value one at a time
// better way of doing this ???
for(var i=0;i < val.length;i++) {
retVal = retVal.replace(/#/i, val.charAt(i));
}
// get rid of rest of #'s
retVal = retVal.replace(/#/gi, "");
return retVal;
}
// The Numeric KeyPad returns keyCodes that ain't all that workable.
//
// ie: KeyPad '1' returns keyCode 97 which String.fromCharCode converts to an 'a'.
//
// This cheesy way allows the Numeric KeyPad to be used
function cleanKeyCode(key)
{
switch(key)
{
case 96: return "0"; break;
case 97: return "1"; break;
case 98: return "2"; break;
case 99: return "3"; break;
case 100: return "4"; break;
case 101: return "5"; break;
case 102: return "6"; break;
case 103: return "7"; break;
case 104: return "8"; break;
case 105: return "9"; break;
default: return String.fromCharCode(key); break;
}
}
// From:
// http://www.faqts.com/knowledge_base/view.phtml/aid/1159/fid/130
function setCaretAtEnd (field) {
if (field.createTextRange) {
var r = field.createTextRange();
r.moveStart('character', field.value.length);
r.collapse();
r.select();
}
}


</script>

<style type="text/css">
body {
font-family: Verdana;
}
</style>

</HEAD>





<BODY>


<form name="formName" method="post">


<table>


<tr>


<td>SSN:</td>


<td><INPUT TYPE="text" NAME="fieldName1" mask="- -####" onblur="return onBlurMask(this);" onfocus="return onFocusMask(this);" onkeydown="return doMask(this);"></td>


</tr>


<tr>


<td>Phone:</td>


<td><INPUT TYPE="text" NAME="fieldName" mask="(###) ###-####" onblur="return onBlurMask(this);" onfocus="return onFocusMask(this);" onkeydown="return doMask(this);"></td>


</tr>


<tr>


<td>Zip:</td>


<td><INPUT TYPE="text" NAME="fieldName2" mask="#####-####" onblur="return onBlurMask(this);" onfocus="return onFocusMask(this);" onkeydown="return doMask(this);"></td>


<tr>


<td>Time:</td>


<td><INPUT TYPE="text" NAME="fieldName3" mask="##:##:##" onblur="return onBlurMask(this);" onfocus="return onFocusMask(this);" onkeydown="return doMask(this);"></td>


</table>


</form>


</BODY>


</HTML>



NOTE: Not cross browser.

jpaulraj
07-14-2006, 02:03 PM
Thanks for the script. Just one thing, this script does not allow the user to enter 9 digit SSN number.. it restricts it to 4 digits.. what i was thinking was if a user enters 9 digit ssn (453902300) it should be formatted to (453-90-2300) whereas if he just enters 4 digit ssn (2300) it should be formatted to (--2300).. is this possible? Provision for 9 digit and 4 digit in same textbox?

Thanks.

shachi
07-14-2006, 02:27 PM
I am not really sure about it but I'll try to make it so.