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

Question

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

状态:根据 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()">