我正在使用一些自动完成代码. 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？
解决方法
您的代码存在一些问题,即传递给select()函数的参数是错误的：这将是窗口,e将是未定义的.此外,在oninput属性中使用select()作为函数名会导致问题,因为select将解析为输入本身的select()方法.更好的方法通常是在脚本中设置事件处理程序,而不是通过事件处理程序属性.
但是,即使纠正了这些问题,问题仍然存在.可能在浏览器在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>
