JQuery keyup 防止在 Chrome 中选择文本。怎么解决？答案

【问题标题】：JQuery keyup prevents text selecion in Chrome. How to solve?JQuery keyup 防止在 Chrome 中选择文本。怎么解决？
【发布时间】：2012-09-25 00:08:31
【问题描述】：

我有一个函数可以将keyup 上的文本转换为大写。代码看起来像这样（我想我也是在 SO 上找到的）：

$(selector).bind('keyup', function (e) {
  if (e.which >= 97 && e.which <= 122) {
    var newKey = e.which - 32;
    e.keyCode = newKey;
    e.charCode = newKey;
  }
  $(this).val((object.val()).toUpperCase());
});

问题

在 Chrome 中，当我输入一些文本然后尝试使用 shift + home 选择它时，光标会回到最后一个字符，而不是选择任何内容。

我也在 Firefox 和 IE 中测试过，一切正常。

请帮帮我

【问题讨论】：

嗨！一个 jsFiddle 将不胜感激......

标签： jquery google-chrome onkeyup

【解决方案1】：

一种可能的解决方案不是在每次按键时都更改值，而是在值实际更改时更改：

$('#input').bind('keyup', function(e) {

    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    var oldVal = $(this).val();
    var newVal = oldVal.toUpperCase();

    if(oldVal != newVal)
    {
        $(this).val(newVal);
    }

});

查看JSFIDDLE。

【讨论】：

有时你会失明，想的并不简单。谢谢！

【解决方案2】：

这里有一个只使用 css 的不错的解决方案：

http://jsfiddle.net/46jrg/

只要申请

text-transform: uppercase

到文本输入区域，然后您不必担心那些复杂的 javascript 内容。更少的代码意味着更少的错误！ :)

编辑：当您选择并复制文本时，它仍将大写，但如果您将其提交到服务器，则必须在发送之前将其大写或在到达那里时将其大写。不过，这通常没什么大不了的。大多数常见的服务器端语言都可以在单个方法调用中完成。

Java 有String::toUpperCase

PHP 有strtoupper 函数

Python 有String::upper

Ruby 有String::upcase

Perl 有 uc 函数

Javascript 有String::toUpperCase

C#.NET / VB.NET 有String::ToUpper

【讨论】：

上次我试过这个，在输入表单上它不会改变正在提交的值。它仅用于显示。
同意，尽管 OP 只是希望能够选择大写的文本。不过我会更新我的答案。 :)
当然，您可以在发送数据的部分执行.ToUpper()（取决于语言）或类似操作？
@RemarkLima 是的，你是对的。我编辑了我的答案，包括一些简单的方法来处理这个问题。
而 C#.NET / VB.NET 是 "str".ToUpper()