在Chrome中，光标位置异常地位于输入值的末尾

Cursor position abnormally situated at the end of the input value in Chrome

本文关键字：输入 于输入 Chrome 光标 位置 异常      更新时间：2023-09-26

我编写了一个jQuery函数，在向输入框中写入文本时自动删除单引号和双引号。在firefox中一切都很好，但在Chrome中，如果您想添加文本开头的内容，这是不允许的。因为光标总是位于输入值的末尾。我不知道如何修复它。这是我的代码：

$.fn.removeQuotes = function()
{
    var elem = $(this);
    elem.bind("focus propertychange change click keyup input paste", function(event)
    {
        setTimeout(function ()
        {
            elem.val(elem.val().replace(/['"]/g, ""));
        }, 1);
   });
};

编辑：评论后，我尝试了这个：

$.fn.removeQuotes = function()
{
    var elem = $(this);
    elem.bind("focus propertychange change click keyup input paste", function(event)
    {
        // store current positions in variables
        var start = this.selectionStart,
        end = this.selectionEnd;
        setTimeout(function ()
        {
            elem.val(elem.val().replace(/['"]/g, ""));
        }, 1);
       // restore from variables...
       this.setSelectionRange(start, end);
   });
};

但一切都没有改变。

这里有一个粗略的版本供您构建-https://jsfiddle.net/Sanjeevi/79gun3g0/1/

    <div>
      <input id="text-box" type="text">
    </div>
$.fn.removeQuotes = function()
{
    var elem = $(this);
    elem.bind("keyup", function(event)
    {
                var start = elem.caret();
            console.log(start);
            elem.val(elem.val().replace(/['"]/g, ""));
            setCaretPosition('text-box',start);
   });
};
function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}
$(document).ready(function(){
    $("#text-box").removeQuotes();
});
相关文章：