javascript - chrome setSelectionRange() 在 oninput 处理程序中不起作用

Question

我正在处理一些自动完成代码。 setSelectionRange() 用于在 oninput 事件处理程序中选择已完成的文本。它至少适用于 Firefox 14，但不适用于 Chrome(6、17)。

演示问题的简化代码片段如下:

<input type='text' oninput='select()' />

function select(e){
    var s = this.value;
    if (s.length)
        this.setSelectionRange(s.length-1, s.length);
}

我在chrome中调试了代码，发现在执行setSelectionRange()后，一开始选中了文本，但后来选中的内容消失了。

如果我将处理程序绑定(bind)到 onclick 而不是 oninput，如下所示:

<input type='text' onclick='select()' />

那么两个浏览器都可以正常工作。

任何人都可以给我一些线索，让选择在 Chrome 中起作用吗？

Answer 1

您的代码存在一些问题，即传递给 select() 函数的参数是错误的:this 将是 window e 将是未定义的。此外，在 oninput 属性中使用 select() 作为函数名称会导致问题，因为 select 将解析为 select() 方法输入本身。更好的方法通常是在脚本中设置事件处理程序，而不是通过事件处理程序属性。

但是，即使纠正了这些问题，问题仍然存在。可能 input 事件在浏览器移动 Chrome 中的插入符之前触发。一个简单的解决方法是使用计时器，尽管这是次优的，因为用户有可能在计时器触发之前输入另一个字符。

演示:http://jsfiddle.net/XXx5r/2/

代码:

<input type="text" oninput="selectText(this)">

<script type="text/javascript">
function selectText(input) {
    var s = input.value;
    if (s.length) {
        window.setTimeout(function() {
            input.setSelectionRange(s.length-1, s.length);
        }, 0);
    }
}
</script>