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>

Answer 2

    
    
    var $input = document.getElementById('my_id');
    
    $input.onfocus = function () {
       $input.setSelectionRange(0, 7);
    }
    $input.focus();

<input type='text' id='my_id' value="My text for example." />

Answer 3

例如在Angular上，您可以执行以下操作：

@ViewChild('input', { static: false }) inputElement: ElementRef;

focus(){    
    setTimeout(() => {
        this.inputElement.nativeElement.focus();
        this.inputElement.nativeElement.setSelectionRange(this.valueInput.length, this.valueInput.length);
    });
}

Answer 4

我认为setTimeout不是最佳解决方案。您只需要在使用setSelectionRange之前调用事件处理程序即可。我用这个：

e.currentTarget.value = previousValue;
onChange(e);
e.currentTarget.setSelectionRange(startPosition, endPosition);

chrome setSelectionRange（）在oninput处理程序中不起作用

4 个答案: