在移动设备上选择文本时，覆盖本机行为

Question

我想知道在移动浏览器上选择文本时是否有办法覆盖原生行为。我试图通过提供自己的操作栏来支持iPhone和Android设备。

任何提示？

Answer 1

虽然您可以简单地使用selectionchange事件来显示您的“操作栏”以及本机功能，但如果您想要“替换”原生行为，您需要从头开始伪造整个选项或使用selectionchange事件，第二个选择是用例如彩色span元素包裹所选文本并取消实际选择（显示你的操作栏），这种方法的麻烦就是1）本机操作栏可能会显示一瞬间，2）体验将与用户可能具有危险效果的体验不同。另一方面，如果你想从头开始做选择，你应该使用user-select css属性来禁用文本选择，然后根据touchstart计算出来，然后选择要选择哪个文本（带有彩色跨度） （实际上只能在极端受控的环境中使用（例如纯文本阅读器应用程序））。

请注意，这在Firefox和Opera中不起作用，因为selectionchange事件没有在那里被触发，你需要在文档上使用touchend事件处理程序+停止所有其他touchend的冒泡支持opera mobile和firefox mobile的活动。 （因为select不起作用且应使用selectionchange这一事实归功于Tim Down）

Answer 2

<强>参考：

jsFiddle Demo with Plugin

我制作的上述jsFiddle演示使用了一个插件，允许您 阻止在 Android 或 > iOS 设备（以及桌面浏览器）。

不会干扰您可能拥有的其他标记，例如jsFiddle中演示的jQuery .click();事件侦听器。

它易于使用，这是安装jQuery插件后的示例标记。

示例HTML：

<p class="notSelectable">This text is not selectable</p>

<p> This text is selectable</p>

示例jQuery：

$(document).ready(function(){

   $('.notSelectable').disableSelection();

});

完成jQuery插件：

$.fn.extend({
    disableSelection: function() {
        this.each(function() {
            this.onselectstart = function() {
                return false;
            };
            this.unselectable = "on";
            $(this).css('-moz-user-select', 'none');
            $(this).css('-webkit-user-select', 'none');
        });
    }
});

Answer 3

如果你的目的是阻止选择，你可以使用像

这样的CSS

body 
{ 
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}