Question

问题：当使用setSelectionRange以编程方式设置文本选择时（在比内容窄的输入字段中），选择了所需的部分，但选择不会滚动到可见性中。似乎在铬和歌剧上发生。适用于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

结合一些不同的技术，例如使用FirebaseDatabase.getInstance().getReference("server/users").addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot dataSnapshot) { for (DataSnapshot userSnapshot : dataSnapshot.getChildren()) { User user = userSnapshot.getValue(User.class); if (user.getNickName() != FirebaseAuth.getInstance().getCurrentUser().getEmail()) users.add(user); } } @Override public void onCancelled(DatabaseError databaseError) { } });并将.focus()设置为.scrollLeft，您可以相对轻松地处理此问题。下面的代码示例（基于提供的小提琴）以及this Fiddle。如果这在所有浏览器中都按预期工作（仅针对Chrome测试），请告诉我。

＆＃13;

scrollWidth

＆＃13;

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);


}

＆＃13;

使用javascript进行文本选择在chrome中不可见

1 个答案: