javascript - 事件上的keyup大写

Question

我想有一个输入会在keyup. 所以我附上了一个简单的事件keyup。

HTML

<input id="test"/>

Javascript（使用 jQuery）

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

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

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

Answer 1

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

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

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

MySQL：UPPER(str)

PHP：strtoupper()

Answer 2

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

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

并使用 jQuery 帮助您选择模糊事件：

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

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

Answer 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;       
  }   
}

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

Answer 4

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

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

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

Answer 5

Javascript（使用 jQuery）

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

Answer 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);
}

Answer 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();
    }
});