HTML 输入框，记住光标位置

Question

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

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

在你投反对票之前，我确实查看了 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!"之间的一个字符，光标会被推到字尾。这需要修复..

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

Answer 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" 事件获得即时价值，那么您就不需要将额外的事件与您的代码绑定。

HTML 输入框，记住光标位置

HTML Input field, remember the cursor location

html

javascript

jquery

html-input