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

Posted 2023-05-07

【中文标题】JQuery keyup 防止在 Chrome 中选择文本。怎么解决？

【英文标题】：JQuery keyup prevents text selecion in Chrome. How to solve?

【发布时间】：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 将不胜感激......

【参考方案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()