javascript chrome setSelectionRange() 在 oninput 处理程序中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11723420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chrome setSelectionRange() not work in oninput handler
提问by bigbug
I'm working with some auto-completion code. setSelectionRange()is used to select text been completed in oninputevent handler. It works at least in Firefox 14, but not in Chrome(6, 17).
我正在处理一些自动完成代码。setSelectionRange()用于在oninput事件处理程序中选择已完成的文本。它至少适用于 Firefox 14，但不适用于 Chrome(6, 17)。
Simplified code snippet demonstrating the problem is like this:
演示问题的简化代码片段是这样的：
<input type='text' oninput='select()' />
function select(e){
var s = this.value;
if (s.length)
this.setSelectionRange(s.length-1, s.length);
}
I debugged the code in chrome, and it turns out that text has been selected at first right after the setSelectionRange()been executed, but the selection disappeared later.
我在chrome中调试了代码，结果是setSelectionRange()刚执行完就先选中了文本，后来选中就消失了。
If i bind the handler to onclickinstead of oninput, like this:
如果我将处理程序绑定到onclick而不是oninput，像这样：
<input type='text' onclick='select()' />
then both browsers work fine.
那么两个浏览器都可以正常工作。
Can anyone please give me some clue to make selection work in Chrome?
任何人都可以给我一些线索来在 Chrome 中进行选择吗？
回答by Tim Down
There are some problems with your code, namely that the parameters passed into the select()function are wrong: thiswill be windowand ewill be undefined. Also, using select()as a function name within the oninputattributes causes a problem because select will resolve to the select()method of the input itself. A better approach is usually to set the event handler in script rather than via an event handler attribute.
您的代码存在一些问题，即传递给select()函数的参数是错误的：thiswill bewindow和ewill be undefined。此外，select()在oninput属性中用作函数名称会导致问题，因为 select 将解析为select()输入本身的方法。更好的方法通常是在脚本中设置事件处理程序，而不是通过事件处理程序属性。
However, the problem exists even after correcting these issues. Possibly the inputevent fires before the browser has moved the caret in Chrome. A simple workaround would be to use a timer, although this is sub-optimal because there's a possibility the user will be able to input another character before the timer fires.
但是，即使纠正了这些问题，问题仍然存在。input事件可能在浏览器移动 Chrome 中的插入符号之前触发。一个简单的解决方法是使用计时器，尽管这是次优的，因为用户有可能在计时器触发之前输入另一个字符。
Demo: http://jsfiddle.net/XXx5r/2/
演示：http: //jsfiddle.net/XXX5r/2/
Code:
代码：
<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>
回答by Юрий Светлов
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." />回答by Carlos Tenorio Pérez
On Angular for example you can do this:
例如，在 Angular 上，您可以这样做：
@ViewChild('input', { static: false }) inputElement: ElementRef;
focus(){
setTimeout(() => {
this.inputElement.nativeElement.focus();
this.inputElement.nativeElement.setSelectionRange(this.valueInput.length, this.valueInput.length);
});
}
回答by Dmitriy Vergiles
I think setTimeoutdoes not the best solution. You just need call event handler before use setSelectionRange. i use this:
我认为setTimeout不是最好的解决方案。您只需要在使用前调用事件处理程序setSelectionRange。我用这个：
e.currentTarget.value = previousValue;
onChange(e);
e.currentTarget.setSelectionRange(startPosition, endPosition);
