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

jpfvwuh4  于 2022-12-06  发布在  Go
关注(0)|答案(4)|浏览(270)

我正在使用一些自动完成代码。setSelectionRange()用于选择在oninput事件处理程序中完成的文本。它至少在Firefox 14中有效,但在Chrome中无效(6,17)。
演示该问题的简化代码片段如下所示:
第一个
我在chrome中调试了代码,结果发现,在执行setSelectionRange()之后,文本最初被选中,但后来选择消失了。
如果我将处理程序绑定到onclick而不是oninput,如下所示:

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

则两个浏览器都可以正常工作。
有人能给予我一些线索,使选择工作在 chrome ?

kgsdhlau

kgsdhlau1#

您的代码存在一些问题,即传入select()函数的参数错误:this将为window,而e将为undefined。此外,在oninput属性中使用select()作为函数名会导致问题,因为select将解析为input本身的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>
avkwfej4

avkwfej43#

例如,在“Angular ”(Angular)上,可以执行以下操作:

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

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

a9wyjsp74#

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

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

相关问题