不丢失光标位置更新输入值

Question

我想使用JavaScript强制一个文本框的值为小写。我尝试了下面的代码，但是每次按键时光标都会跳到输入的末尾。如何避免这种情况？

$("#beLowerCase").keyup(function(){
    $(this).val( $(this).val().toLowerCase() );
});

- user1318194

---

在设置数值之前保存选择范围，并在设置完成后恢复它？ - Bergi

是的！这将会发生，因为你所做的事情！基本上，你不想改变整个val()。找到一种方法只改变按下的键而不是整个值。 - Arshabh Agarwal

在失去焦点时将值转换为小写可能会更简单。 - Mike Christensen

@MikeChristensen，很遗憾，那对我正在做的事情没有用。 - user1318194

Answer 1

$("#beLowerCase").on('input', function(){

    // store current positions in variables
    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.toLowerCase();

    // restore from variables...
    this.setSelectionRange(start, end);
});

(fiddle)

---

CSS 也可以实现这个效果：

#beLowerCase{
  text-transform:lowercase;
}

服务器可以处理实际的小写转换...

- nice ass

---

太棒了！！CSS 的东西好多了！ - user1318194

我讨厌jQuery的原因是因为很多人在不必要的情况下都使用它。 - Iharob Al Asimi

注意，当您使用jQuery选择器时，您需要在DOM元素上调用 selectionStart。这意味着您需要执行 $("#someId").get(0).selectionStart。 - Micer

对于 Safari 浏览器，不要通过“失去焦点”事件来触发这个小写转换函数，否则输入框将一直保持焦点。 - Sebastien Lorber

在使用此技术剥离字符时，请不要忘记考虑光标位置的变化。如果在设置selectionRange之前值的长度发生了变化，则应从选择的开头和结尾中减去长度差。 - Dreamdealer