Question

我想在keyup上输入一个大写的输入。所以我在keyup上附上一个简单的事件。

HTML

<input id="test"/>

Javascript（使用jQuery）

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

但是我发现在Chrome和IE中，当你按下左箭头时，光标会自动移动到最后。我注意到我应该检测输入是否只是字母。我应该使用keycode范围还是regexp进行检测？

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

Answer 1

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

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

但是，它会在表单数据中返回as-typed值，因此请使用以下任一方法将其作为all-caps存储在数据库中：

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 Code Part中：

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

keyup大写问题

7 个答案: