键入时转换为大写,有一些延迟

时间:2012-10-31 09:53:52

标签: javascript jquery css

我在输入时使用以下代码转换为大写。

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

以下代码

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

以上所有这些代码都运行正常。但对于能够查看较低情况一段时间的用户。之后只有它转换为大写。

我在css中尝试使用'text-transform: uppercase'。但它不适用于Android Os的三星标签。请任何人通过脚本帮助我实现这一目标。

9 个答案:

答案 0 :(得分:21)

你可以尝试:

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

  return false;
});​

http://jsfiddle.net/5gLyX/

它有一些缺陷,但我认为这个想法很明确,可以建立在其上。


更好的版本,但请注意IE&lt; 9中不支持的input事件。

$('.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>

答案 1 :(得分:21)

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

尝试

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

Demo - JSFiddle

答案 2 :(得分:4)

如果您不在乎,即&lt; 9,请听“输入”事件

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

并且对于IE&lt; 9,请使用“keyup”而不是

演示:http://jsfiddle.net/MupXZ/6/

答案 3 :(得分:1)

为什么你不添加这一行

$(this).val($(this).val().toUpperCase());
$(this).focus();之前

?并使用on()代替live()

答案 4 :(得分:1)

如何使用keyup而不是keypress。

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

一旦密钥被释放,最后一个字母就会被更改。

像这样:http://jsfiddle.net/mNVXK/

答案 5 :(得分:1)

扩展@Yoshi's answer

  

此扩展程序负责:

     

退格: 8
  标签: 9
  输入: 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;
    }
});

使用bind原因OP正在使用jQuery 1.5.1

答案 6 :(得分:0)

<强>尝试:

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

答案 7 :(得分:0)

对于那些使用更高版本的jquery替换live with on的人。 例如

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

现在是

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

答案 8 :(得分: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" />

请遵循:http://jsfiddle.net/5gLyX/389/