Ramaraj Karuppusamy Ramaraj Karuppusamy - 8 days ago 7
CSS Question

Convert to upper case while typing, with some delay

I used following codes to convert to upper case while typing.

$(".input_capital").live('keypress', function(e)
{
var defaultStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var checkstr = $(this).val();
var str1 = '';
for (i = 0; i < checkstr.length; i++)
{
var ch = checkstr.charCodeAt(i);
if (ch>=97 && ch<=122){
str1 += defaultStr.charAt(ch-97);
}else{
str1 += checkstr.charAt(i);
}
}
$(this).focus();
$(this).val(str1);
});


And the following code

$(".input_capital").live('keypress', function(e)
{
$(this).val($(this).val().toUpperCase());
});


all these above code is working fine. But for user able to view lower cases for some time. After that only its converting to upper case.

I tried with '
text-transform: uppercase
' in css. But it is not working in Samsung tab with Android Os. Please anybody help me to achieve this by script.

Answer

you can try:

$(".input_capital").on('keydown', function(evt) {
  $(this).val(function (_, val) {
    return val + String.fromCharCode(evt.which).toUpperCase();
  });

  return false;
});‚Äč

http://jsfiddle.net/5gLyX/

It has some flaws, but I think the idea is clear, and can be build upon.


Better version, though mind the input event which is not supported in IE<9.

$('.input_capital').on('input', function(evt) {
  $(this).val(function (_, val) {
    return val.toUpperCase();
  });
});