How To Type Mixing Of Caps And Small Letter In Same Textbox, If I Set Default Uppercase In Style?
Solution 1:
I'm going to assume you want the default text-entry to be uppercase, but to allow lowercase when appropriate (as if the Caps Lock Key was locked). Thus I suggest you don't specify the default style of all-caps. You can use JavaScript to intercept the text being typed, and manipulate the text AS IF the caps-lock key was locked:
This is my complete (and since tested) test-page code (edited from my original answer, per my comments below):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test-page</title>
<script type="text/javascript">
//<!--
var bx, chr, indx, intvl, last, lng, ln2, str, tmp;
function PrepBox()
{ bx = document.getElementById("txtbx");
bx.value = ""; //start with no text in box
last = ""; //this will be the manipulated string
lng = 0; //its length
intvl = setInterval("txtchk();", 100); //ten times per second
return;
}
function txtchk()
{ tmp = bx.value;
ln2 = tmp.length;
if(ln2 < lng) //test for backspace
last = tmp.substr(0,ln2); //shorten the manipulated string
else if(ln2 > lng)
{ str = tmp.substr(lng); //get newly-typed character(s)
for(indx=0; indx<str.length; indx++) //for each one of them
{ chr = str.charAt(indx); //get it
if((chr >= "a") && (chr <= "z"))
last += chr.toUpperCase(); //change lowercase to upper
else if((chr >= "A") && (chr <= "Z"))
last += chr.toLowerCase(); //change uppercase to lower
else
last += chr; //periods, commas, semicolons, ...
} }
lng = ln2; //update saved-length of "last"
bx.value = last; //replace text in box with manipulated string
return;
}
function ifenter(e) //test for Enter key pressed
{ if((e.keyCode == 13) && (bx.value.length > 2)) //check minimum entry length
{ clearInterval(intvl); //stop checking the box 10 times/second
bx.blur(); //remove focus from box (ensures PrepBox() gets called for next entry)
DoSomethingWithTheText(bx.value);
}
return;
}
function DoSomethingWithTheText(s)
{ tmp = document.createElement("span");
tmp.innerHTML="<br />" + s;
document.body.appendChild(tmp);
return;
}
// -->
</script>
</head>
<body>
<input id="txtbx" size="50" maxlength="40" type="text" style="font-size:10pt;" onfocus="PrepBox();" onkeydown="ifenter(event);" />
</body>
</html>
Note if the user presses/locks the Caps Lock key, this code will have the effect of manipulating the string in the text box as if that key had not been locked! (And for anyone interested, that txtchk() function can be edited to do all sorts of interesting things; I usually use it to erase characters that I don't want the user to type.)
Solution 2:
Code for the answer is as follows,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Change caps to small</title>
<script type="text/javascript">
var bx, chr, indx, intvl, last, lng, ln2, str, tmp;
function PrepBox()
{
bx = document.getElementById("txtbx");
last = ""; //this will be the manipulated string
lng = 0; //its length
intvl = setInterval("txtchk();", 100); //ten times per second
return;
}
function txtchk()
{
tmp = bx.value;
ln2 = tmp.length;
if(ln2 < lng) //test for backspace
last = tmp.substr(0,ln2); //shorten the manipulated string
else if(ln2 > lng)
{
str = tmp.substr(lng); //get newly-typed character(s)
for(indx=0; indx<str.length; indx++) //for each one of them
{
chr = str.charAt(indx);
if((chr >= "a") && (chr <= "z"))
last += chr.toUpperCase(); //change lowercase to upper
else if((chr >= "A") && (chr <= "Z"))
last += chr.toLowerCase(); //change uppercase to lower
else
last += chr; //periods, commas, semicolons, ...
}
}
lng = ln2; //update saved-length of "last"
bx.value = last; //replace text in box with manipulated string
return;
}
</script>
</head>
<body>
<input id="txtbx" size="50" maxlength="40" type="text" style="font-size:10pt;" onFocus="PrepBox();" />
</body>
</html>
Output :
1. If caps lock is off, default typing text is caps, if i typing text with shift key pressing, it changed to small.
2. If caps lock is on, default typing text is small, if i typing text with shift key pressing, it changed to caps.
Post a Comment for "How To Type Mixing Of Caps And Small Letter In Same Textbox, If I Set Default Uppercase In Style?"