javascript 单击以选择div中不适用于移动的的所有文本

2ledvvac  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(135)
    • bounty将在4天后过期**。此问题的答案可获得+100声誉奖励。Henrik Petterson正在寻找来自声誉良好来源的答案:制作一个在iOS和其他移动操作系统上工作的经过测试的解决方案的赏金...

我想通过单击/点击来选择div中的所有文本。参见示例代码(jsFiddle):

document.getElementById('target').addEventListener('click', function (event) {
  setTimeout(function() {
    window.getSelection().selectAllChildren(
            document.getElementById('target')
    )
  }, 100);
});
<div id="target">
  <span>click to select all </span>
  <span>text</span>
</div>

它在桌面上工作,但在使用Safari的iOS上不能正常工作(在Android上也可能有同样的问题)。
正如您所看到的,我添加了一个setTimeout(),试图捕获移动点击,但它只有在多次点击或通过 * 长 * 点击聚焦在div上后才能工作。
我怎样才能让它选择全文与 * 单 * 点击在iOS上使用纯JS?

    • 编辑1**:将touchstart设置为事件触发器 * 可能 * 有效,但应避免使用,因为向下滚动页面并意外触摸元素可能会触发事件触发器。
    • 编辑2**:悬赏一个在iOS和移动设备上运行的 * 测试 * 解决方案。
bzzcjhmw

bzzcjhmw1#

您可以使用user-select: all;MDN)的仅CSS方法来代替JS

#target {
  /*
  -webkit-touch-callout: all; /* iOS Safari /
  -webkit-user-select: all; /* Safari /
  -khtml-user-select: all; /* Konqueror HTML /
  -moz-user-select: all; /* Firefox /
  -ms-user-select: all; /* Internet Explorer/Edge /
  */
  user-select: all;
}
<div id="target">
  <span>click to select all </span>
  <span>text</span>
</div>

请注意,如果您希望用户能够在#target中选择一个自定义范围,它不会让用户使用这种方法,因为它会"强制"选择全文本。但如果这不是一个问题/要求,CSS方法更优雅(恕我直言),应该可以跨设备/平台工作(如果您需要支持非常旧的浏览器,您也可以使用供应商前缀)。

相关问题