10

我正在使用一些自动完成代码。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 中进行选择？

4

4 回答 4

18

您的代码存在一些问题，即传递给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>
于 2012-07-30T15:04:45.837 回答
1 

    
    
    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." />

于 2019-05-17T09:41:58.213 回答
1

例如，在 Angular 上，您可以这样做：

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

focus(){    
    setTimeout(() => {
        this.inputElement.nativeElement.focus();
        this.inputElement.nativeElement.setSelectionRange(this.valueInput.length, this.valueInput.length);
    });
}
于 2020-01-10T12:11:54.157 回答
0

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

e.currentTarget.value = previousValue;
onChange(e);
e.currentTarget.setSelectionRange(startPosition, endPosition);
于 2020-04-23T11:29:07.197 回答