防止默认光标放置

Question

这是我用来在输入值的第三个符号之前设置插入符位置的代码。它工作正常，但有一个例外——函数 setCaretPosition() 在默认脚本触发后执行了片刻，而我希望它立即发生。是否有机会在不添加覆盖元素的情况下避免默认光标放置？

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

var inputId = 'test';

document.getElementById(inputId).addEventListener('click', function() {
    setCaretPosition(inputId, 2);
},false)

https://jsfiddle.net/82fnpmf6/

Answer 1

是的，有一种方法可以避免这种位置的突然改变。我们可以通过一些技巧来改变这种看法。单击输入字段后，您可以克隆输入并使其与原始输入重叠。使用超时再次更改字段的顺序，以便非闪烁的克隆再次落后于原始。所以基本上用户会在几毫秒内看到未选择的输入，这应该有足够的时间将光标定位在它所属的位置。

由于位置的变化发生在不到一秒的时间内，我认为这不会打扰用户。

防止默认光标放置

Prevent default cursor placement

javascript

events

input

focus

caret