Skip to content Skip to sidebar Skip to footer
Home / Html / Php

How To Type Mixing Of Caps And Small Letter In Same Textbox, If I Set Default Uppercase In Style?

Post a Comment
I set default text as caps for textbox in style (i.e., style='text-transform: uppercase') in html. My Query is, i need to type mixing of caps and small letters in the textbox as l

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><metacharset="UTF-8" /><title>test-page</title><scripttype="text/javascript">//<!--var bx, chr, indx, intvl, last, lng, ln2, str, tmp;

functionPrepBox()
{ 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 secondreturn;
}

functiontxtchk()
{ tmp = bx.value;
  ln2 = tmp.length;
  if(ln2 < lng) //test for backspace
    last = tmp.substr(0,ln2);  //shorten the manipulated stringelseif(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 itif((chr >= "a") && (chr <= "z"))
        last += chr.toUpperCase();   //change lowercase to upperelseif((chr >= "A") && (chr <= "Z"))
        last += chr.toLowerCase();   //change uppercase to lowerelse
        last += chr;   //periods, commas, semicolons, ...
  } }
  lng = ln2;  //update saved-length of "last"
  bx.value = last; //replace text in box with manipulated stringreturn;
}

functionifenter(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;
}

functionDoSomethingWithTheText(s)
{ tmp = document.createElement("span");
  tmp.innerHTML="<br />" + s;
  document.body.appendChild(tmp);  
  return;
}

// --></script></head><body><inputid="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><metacharset="UTF-8" /><title>Change caps to small</title><scripttype="text/javascript">var bx, chr, indx, intvl, last, lng, ln2, str, tmp;
functionPrepBox()
{
    bx = document.getElementById("txtbx");
    last = "";     //this will be the manipulated string
    lng = 0;       //its length
    intvl = setInterval("txtchk();", 100); //ten times per secondreturn;
}
functiontxtchk()
{ 
tmp = bx.value;
ln2 = tmp.length;

if(ln2 < lng) //test for backspace
    last = tmp.substr(0,ln2);  //shorten the manipulated stringelseif(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 upperelseif((chr >= "A") && (chr <= "Z"))
            last += chr.toLowerCase();   //change uppercase to lowerelse
            last += chr;   //periods, commas, semicolons, ...
    }
}
lng = ln2;  //update saved-length of "last"
bx.value = last; //replace text in box with manipulated stringreturn;
}
</script></head><body><inputid="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?"