HTML 输入字段，记住光标位置答案

【问题标题】：HTML Input field, remember the cursor locationHTML 输入字段，记住光标位置
【发布时间】：2015-11-20 11:43:23
【问题描述】：

我有一个应用程序，其输入字段需要在用户输入字符后立即转换为大写。这按预期工作。

但是如果用户试图在已经存在的单词之间输入一个字符，光标就会被推到输入字段的末尾。有没有办法让光标保持在正确的位置？

在您投反对票之前，我确实查看了 Stack Overflow 和其他地方的帖子。找不到合适的解决方案。请提供您的反馈。

$(function() {
  $("#referenceNo").on('keyup change', function(e) {
    $(this).val($(this).val().toUpperCase());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="referenceNo">Reference No</label>
<br/>
<input type="text" id="referenceNo" name="referenceNo" value="HELLO WORLD!" />

尝试在“Hello World!”之间输入一个字符，光标会被推到词尾。这需要修复..

【问题讨论】：

标签： javascript jquery html html-input

【解决方案1】：

试试这个，你可以用setSelectionRange工作Fiddle

$(function () {
    $("#referenceNo").on('keyup change', function (e) {            
        var startPos = this.selectionStart,
        endPos = this.selectionEnd;    

        $(this).val($(this).val().toUpperCase());    
        // restore cursor
        this.setSelectionRange(startPos, endPos );

    });
});

你也可以使用纯 CSS

   #referenceNo {
     text-transform: uppercase
   }

【讨论】：

css 解决方案不错！你在哪里找到的？
试过这个，它有效。现在将使用此代码。谢谢。将问题开放一天左右，看看是否会出现更好的答案。

【解决方案2】：

我建议你通过 CSS 来做到这一点。给元素添加text-transform属性：

#referenceNo {
    text-transform: uppercase
}

不需要脚本。

Fiddle

【讨论】：

在 JS 代码中，我仍然得到小字符。这是一个巧妙的技巧，确实在另一个问题中看到了它，但在我的情况下没有用。感谢您的建议。

【解决方案3】：

您可以通过 CSS 实现可视化，并将值发送到服务器，您可以使用 javascript。

喜欢：这是 CSS 代码

#abc {
    text-transform: uppercase
}

这是 HTML：

<input class="form-control" type="text" id="abc" />

这是javascript：

$("#abc").on("change", function(){ var x = $("#abc").val().toUpperCase(); });

如果您不需要，您可以使用“keyup”事件来获取即时值，那么您不需要将额外的事件与您的代码绑定。

【讨论】：

谢谢，感谢更简单的解决方案。
是的，刚刚做到了。周末不在，所以耽搁了。