keyup 事件上的大写答案

【问题标题】：keyup Uppercase on eventkeyup 事件上的大写
【发布时间】：2010-01-09 06:04:54
【问题描述】：

我希望输入可以在keyup 上更改为大写。所以我在keyup 上附加了一个简单的事件。

HTML

<input id="test"/>

Javascript（使用 jQuery）

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

但我发现在 Chrome 和 IE 中，当你按下左箭头时，光标会自动移动到结尾。我注意到我应该检测输入是否只是字母。我应该使用键码范围还是正则表达式进行检测？

示例：http://jsbin.com/omope3

【问题讨论】：

标签： javascript jquery jquery-events onkeyup

【解决方案1】：

或者您可以使用以下方法（这可能更快更优雅）：

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

但这会将按类型输入的值发送回表单数据中，因此请使用以下任一方法将其作为全大写字母存储在数据库中：

MySQL：UPPER(str)

PHP：strtoupper()

【讨论】：

此方法的另一个优点是用户只看到输入的全大写文本，而不必看着他/她输入的文本变成大写，就像使用 Javascript方法。
+1，也可以在表单的onsubmit事件中将真值转换为大写，然后再将数据发送到服务器。
+1，比我的答案更好。我不知道这个文本转换选项，它完全跨浏览器吗？
我们可以使用这个加上一个 on blur uppercase 方法来解决。 $("#test").css('text-transform','uppercase').blur(function(){ this.value = this.value.toUpperCase(); });

【解决方案2】：

另一种解决方案，如果您使用 text-transform: uppercase; CSS 属性：

<input id='test' style='text-transform: uppercase;' type='text'></input>

并通过 jQuery 帮助您选择 blur 事件：

$("#test").blur(function(){
  this.value = this.value.toUpperCase();
});

有了这个解决方案，你不必在数据库字段上，你可以使用光标移动，用户可以在输入字段中插入/重写文本。

【讨论】：

【解决方案3】：

使用这个：

<input onkeyup="MakeMeUpper(this)" type="text"/>

并在您的 JS 代码部分中输入：

function MakeMeUpper(f, e){ 
  var actualValue = f.value;        
  var upperValue = f.value.toUpperCase();
  if( actValue != upperValue){
    f.value = upperValue;       
  }   
}

如果用户输入的内容不是文本（左箭头或右箭头），此代码不会更改文本。

【讨论】：

【解决方案4】：

是的，看起来有些浏览器会在值更新时将光标移动到末尾。你可以这样做：

$("#test").keyup(function(){
  var upper = this.value.toUpperCase();
  if (this.value != upper) 
      this.value = upper;
});

只有在需要更改时才会更改值。但是，这仍然会给您留下一个问题，如果您输入abd，向左移动，然后点击c 得到abcd，光标仍然会移动到末尾。

【讨论】：

【解决方案5】：

Javascript（使用 jQuery）

$("#test").keyup(function(){
  $(this).val($(this).val().toUpperCase());
});

【讨论】：

这很好，但您可能需要 this.val() 而不是 this.value()。

【解决方案6】：

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
    $(this).val(str);
}

【讨论】：

【解决方案7】：

您可能想查看 keyup 函数中的 keyCode。

var UP_ARROW = 38,
    DOWN_ARROW = 40;

$('#test').keyup(function(evt){
    if (evt.keyCode == UP_ARROW)
    {
        this.value = this.value.toUpperCase();
    }

    if (evt.keyCode == DOWN_ARROW)
    {
        this.value = this.value.toLowerCase();
    }
});

【讨论】：