Question

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

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

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

＆＃13;

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

＆＃13;

<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!" />

＆＃13;

尝试在＆＃34; Hello World！＆＃34;之间输入一个字符，光标将被推到单词的末尾。这需要修复..

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
   }

Answer 2

我建议您通过CSS执行此操作。将text-transform属性添加到元素：

#referenceNo {
    text-transform: uppercase
}

不需要脚本。

的 Fiddle

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

2 个答案: