javascript - HTML 输入字段，记住光标位置

Question

我有一个带有输入字段的应用程序，一旦用户输入字符，该输入字段就需要转换为大写。这按预期工作。

但是，如果用户尝试在已存在的单词之间输入字符，光标将被推到输入字段的末尾。有没有办法可以将光标保持在正确的位置？

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

JSFiddle Link

$(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!”之间输入一个字符，光标会被推到单词末尾。这需要修复..

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