Convert to upper case while typing, with some delay

Question

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.

do you want transformation to be instant?? – Sibu Oct 31 '12 at 10:00 — Sibu, Oct 31 '12 at 10:00

score 26 · Answer 1 · answered Nov 25 '15 at 13:46

26

Note: This answer is without delay..if you like to avoid Jquery

Try

<input type="text" style="text-transform: uppercase">

Demo - JSFiddle

answered Nov 25 '15 at 13:46

Some Java Guy

4,992
19
71
108

l o l Damann!! Sometimes we want to show up how smart we are by using all jquery thing `lol` and look at this `lol` come and look at this `lol` – Maduro May 09 '16 at 13:56
20

This only gives the _appearance_ that the text in in upper/lower case. If you send the value to the server, it will be in mixed case. – Domenic D. Jun 10 '16 at 14:25
@DomenicD. yes I had trouble using this on submitting data to the server – Drenyl Sep 06 '18 at 01:56
Wow, very tricky way. I like it so much. BTW thanks bro. – S.M.Fazle Rabbi Jun 14 '23 at 04:25

score 23 · Accepted Answer · edited May 23 '18 at 11:10

23

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='input_capital' rows='8'></textarea>

edited May 23 '18 at 11:10

Roshana Pitigala

8,437
8
49
80

answered Oct 31 '12 at 10:11

Yoshi

54,081
14
89
103

This is fine.One issue is there. I am unable to type at the middle. It will display the typed char only at the end. – Ramaraj Karuppusamy Oct 31 '12 at 10:18
1

and arrow key,back key and delete key also not working in chrome – Muthukumar M Oct 31 '12 at 10:21
@RamarajKaruppusamy That's to be expected. If you want to amend that, you'll have a lot of work (basically just for IE<9). – Yoshi Oct 31 '12 at 10:21
also, you can't press `delete` button. It shows some char if you press the delete button – Maduro May 09 '16 at 13:57

guirong.cao · Answer 3 · 2012-10-31T10:32:35.220

5

if you don't care ie<9 , listen the "input" event

$(".input_capital").bind("input", function(e){
   this.value = this.value.toUpperCase();
});

and for IE<9, use "keyup" instead

demo : http://jsfiddle.net/MupXZ/6/

edited Oct 31 '12 at 10:32

answered Oct 31 '12 at 10:05

guirong.cao

96
1
6

I am using jquery 5.1. So I cant use upper versions of jquery because of some plugin problem. Can u please suggest any other event than on. – Ramaraj Karuppusamy Oct 31 '12 at 10:09
@techfoobar Thinks op means `1.5.1` – Andreas Louv Oct 31 '12 at 10:38

score 2 · Answer 4 · answered Oct 31 '12 at 10:27

2

What about using keyup instead of keypress.

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

So that the last letter is changed as soon as the key is released.

Like this : http://jsfiddle.net/mNVXK/

answered Oct 31 '12 at 10:27

Chris Charles

4,406
17
31

.live is no longer usable – Njuguna Mureithi May 06 '15 at 07:37
But is was in 2012 :) – Chris Charles May 06 '15 at 08:15

score 1 · Answer 5 · edited Oct 31 '12 at 10:06

1

Why you just not add this line

$(this).val($(this).val().toUpperCase());

before $(this).focus();? And use on() instead of live()

edited Oct 31 '12 at 10:06

coolguy

7,866
9
45
71

answered Oct 31 '12 at 10:01

Morpheus

8,829
13
51
77

I am using jquery 5.1. So I cant use upper versions of jquery because of some plugin problem. Can u please suggest any other event than on. – Ramaraj Karuppusamy Oct 31 '12 at 10:10

score 1 · Answer 6 · edited Jun 20 '20 at 09:12

To extend @Yoshi's answer

This extension takes care of:

Backspace: 8
Tab: 9
Enter: 13
Arrow keys: 37,38,39,40

$(".input_capital").bind('keydown', function(event) {
    if ( $.inArray( event.keyCode, [8,9,13,37,38,39,40]) === -1 ) {
        $(this).val(function(i, val) {
            return val + String.fromCharCode(event.keyCode).toUpperCase();
        });
        return false;
    }
});

Using bind cause OP is using jQuery 1.5.1

score 0 · Answer 7 · edited Nov 06 '12 at 00:11

0

Try:

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

edited Nov 06 '12 at 00:11

Andreas Louv

46,145
13
104
123

answered Oct 31 '12 at 09:59

atredis

372
2
10

1

It's better to use a function wrapped around that instead of a string, as well. – Achal Dave Oct 31 '12 at 10:01

score 0 · Answer 8 · answered May 22 '14 at 20:28

for those using later versions of jquery replace live with on. eg.

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

is now

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

score 0 · Answer 9 · answered Nov 29 '16 at 12:00

0

js

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

html

<input type="text" class="input_capital" style="text-transform: uppercase" />

Follow this: http://jsfiddle.net/5gLyX/389/

answered Nov 29 '16 at 12:00

Prolay Rudra Bhattacharjee

13
3

Convert to upper case while typing, with some delay

9 Answers9

This extension takes care of: