javascript - 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.

score 24 · Accepted Answer

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

試す

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

デモ - JSFiddle

score 23 · Accepted Answer

あなたが試すことができます：

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

  return false;
});

http://jsfiddle.net/5gLyX/

いくつかの欠点がありますが、アイデアは明確であり、それを基に構築できると思います。

inputIE <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>

score 5 · Accepted Answer

ie <9を気にしない場合は、「入力」イベントをリッスンします

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

IE <9の場合は、代わりに「keyup」を使用してください

デモ： http： //jsfiddle.net/MupXZ/6/

score 2 · Accepted Answer

キープレスの代わりにキーアップを使用するのはどうですか。

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

キーを放すとすぐに最後の文字が変更されるようにします。

このように: http://jsfiddle.net/mNVXK/

score 1 · Accepted Answer

この行を追加しない理由

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

前に$(this).focus();？そしてon()代わりに使用するlive()

score 1 · Accepted Answer

@Yoshiの回答を拡張するには

この拡張機能は次のことを処理します。

Backspace: 8
Tab: 9
Enter: 13
矢印キー: 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;
    }
});

OPが使用してbindいる原因を使用jQuery 1.5.1

score 0 · Accepted Answer

試す：

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

score 0 · Accepted Answer

jquery の新しいバージョンを使用している場合は、live を on に置き換えます。例えば。

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

今でしょ

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

javascript - Convert to upper case while typing, with some delay

9 に答える 9

この拡張機能は次のことを処理します。

Related

Reference