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()执行后首先被选中,但选择后来消失了.

如果我绑定处理程序onclick而不是oninput像这样:

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

然后两个浏览器工作正常.

任何人都可以给我一些线索,以便在Chrome中进行选择吗？

Answer 1

您的代码存在一些问题,即传递给select()函数的参数是错误的:this将是window并且e将是未定义的.此外,select()在oninput属性中使用作为函数名称会导致问题,因为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>