防止默认光标放置

时间:2015-12-28 02:04:14

标签: javascript events input focus caret

这里是我用来在输入值的第三个符号之前设置插入位置的代码。它工作正常,但有一个例外 - 函数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/

1 个答案:

答案 0 :(得分:1)

是的,有办法避免这种突然改变的立场。我们可以通过做一些诡计来改变观念。单击输入字段后,您可以克隆输入并使其与原始文本重叠。使用超时再次更改字段的顺序,以便非闪烁克隆再次返回原始字段。所以基本上用户看到一个非选择的输入几毫秒,这应该足够的时间将光标定位在它所属的位置。

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