Jquery keyup 功能和大写文本答案

【问题标题】：Jquery keyup functionality and upper case textJquery keyup 功能和大写文本
【发布时间】：2012-11-30 23:41:07
【问题描述】：

我正在尝试将文本框中的字符转换为大写。

但这似乎会影响我的光标位置。

下面的JS小提琴：

$(this).val($(this).val().toUpperCase());

http://jsfiddle.net/ZdRnZ/

如果我在空白文本框中输入一切都很好...但是如果我尝试在文本之间输入，光标会立即移到单词的末尾。

我怎样才能防止它发生，我的光标应该在我停止输入的地方，而不是在文本的末尾。

在 Firefox 中运行良好，IE 搞砸了。我需要它在 IE 上工作

【问题讨论】：

plugins.jquery.com/project/jCaret
stackoverflow.com/questions/2897155/…
实际上，它也发生在 Firefox 中。我会在 .blur() jsfiddle.net/ZdRnZ/3 上转换为大写
可以在这里找到答案：jQuery: Get the cursor position of text in input without browser specific code? 和这里：how can i get cursor position in a textarea?（这一个查看投票较高的答案，而不是接受的答案）
为什么不等用户写完句子，当输入框失去焦点时，将大写应用于所有文本。

标签： jquery

【解决方案1】：

这也可以通过 CSS 来实现：

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

把它放在你的 HTML 页面中，文本框将强制所有文本输入大写。还有其他修饰符：

小写、大写、无、继承

当然，这可能取决于浏览器，但似乎大多数都支持浏览器。

我已更新您的示例，添加了 text-transform 样式并将 jquery 事件绑定从 keyup 切换为 change ： http://jsfiddle.net/ZdRnZ/6/

【讨论】：

我在我的 css 上实现了它，因为我还有其他字段。奇迹般有效。谢谢

【解决方案2】：

$('#txt').keyup(function (e) {
  var position, texto, code;
  texto=this.value;
  code=e.keyCode;   
  position=texto.slice(0, this.selectionStart).length;       
  if((code>=65 && code <=90 )|| code ==192 ){
    this.value=texto.toUpperCase();
    this.setSelectionRange(position,position);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="txt" style="width:100%" />

【讨论】：