javascript 的文本选择在 chrome 中不可见

Question

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

状态： 根据 chromium bug report，这实际上是自 2014 年以来的一个已知问题。所以我主要对解决方法感兴趣，因为这个问题会在我的应用程序中引起一些其他奇怪的副作用。

我已经尝试过超时、额外的焦点模糊对。

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

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

和以下函数：

function selectText() {
  var input=  document.getElementById("text");
  input.focus();
    setTimeout(function(){ //workaround for edge
      input.setSelectionRange(7,9,"forward");
    }, 1);
 }

这里是 code 试用版。

Answer 1

结合几种不同的技术，例如使用.focus()并将.scrollLeft设置为scrollWidth，您可以相对轻松地解决这个问题。下面的代码示例（基于 Fiddle 提供的）以及 this Fiddle 中的代码示例。让我知道这是否在所有浏览器中都按预期工作（仅测试 Chrome）。

function selectText() {
  var input = document.getElementById("text");
  input.focus();

  var txt = input.value;
  setTimeout(function() {
    document.getElementById("text").focus();
    document.getElementById("text").scrollLeft = document.getElementById("text").scrollWidth;
    document.getElementById("text").setSelectionRange(7, 9, "forward");
    document.getElementById("selection").innerHTML = "selection is: " + txt.substring(input.selectionStart, input.selectionEnd);
  }, 1);


}

<p id="selection"></p>
<input id="text" type="text" value="123456789" size="2" />
<input type="button" value="Select" id="select" onclick="selectText()">

javascript 的文本选择在 chrome 中不可见

Text selection with javascript is not visible in chromium

html

javascript

input

selection