使用javascript选择的文本在chromium中不可见

问题： 当使用

setSelectionRange

以编程方式设置文本选择时（在比内容窄的输入字段中），会选择所需的部分，但选择不会滚动到可见性中。似乎发生在chrome和opera上。适用于Firefox和edge

声明：这实际上是2014年以来的一个已知问题。所以我主要对一个解决方法感兴趣，因为这个问题会在我的应用程序中引起一些奇怪的副作用

我已经尝试过超时，额外的聚焦模糊对

具有以下输入的最小案例：

<input id="text" type="text" value="123456789" size="2"/>

---

下面是要尝试的方法。

结合一些不同的技术，例如使用

.focus（）

并将

.scrollLeft

设置为

scrollWidth

，您可以相对轻松地处理此问题。下面的代码示例（基于提供的小提琴）以及中的代码示例。让我知道这是否在所有浏览器中都能正常工作（仅针对Chrome进行了测试）

函数selectText（）{
var输入=document.getElementById（“文本”）；
input.focus（）；
var txt=输入值；
setTimeout（函数（）{
document.getElementById（“text”）.focus（）；
document.getElementById（“text”）.scrollLeft=document.getElementById（“text”）.scrollWidth；
document.getElementById（“文本”）.setSelectionRange（7,9，“向前”）；
document.getElementById（“selection”）.innerHTML=“selection is:”+txt.substring（input.selectionStart，input.selectionEnd）；
}, 1);
}

这仅在选择内容位于内容末尾时有效，但由于

而失败。

滚动是个好主意，也许我可以准确滚动选择的开始位置。@vasf滚动是我看到您的问题时想到的第一件事。您可以轻松地更改我的代码以滚动到特定的偏移量，这样无论其实际位置如何，选择都是可见的。是的，

document.getElementById（“text”）.scrollLeft=document.getElementById（“text”）.scrollWidth*（input.selectionStart/input.value.length）似乎做到了这一点！
function selectText() {
  var input=  document.getElementById("text");
  input.focus();
    setTimeout(function(){ //workaround for edge
      input.setSelectionRange(7,9,"forward");
    }, 1);
 }