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

Posted 2023-03-14

【中文标题】在移动设备上选择文本时覆盖本机行为

【英文标题】：Overrides the native behavior when selecting texts on mobile device

【发布时间】：2012-06-28 01:37:55

【问题描述】：

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

有什么建议吗？

【参考方案1】：

虽然您可以很简单地使用 selectionchange 事件来显示您的“操作栏”以及原生功能，但如果您想“替换”原生行为，您需要从头开始伪造整个选择或使用selectionchange 事件和第二次选择，例如，您使用彩色 span 元素包装所选文本并取消实际选择（同时显示您的操作栏），这种方法的问题在于 1）本机操作栏可能显示片刻和 2) 体验将不同于用户习惯的可能产生危险影响的体验。另一方面，如果您想从头开始进行选择，您应该使用user-select css 属性来禁用文本选择，然后根据 touchstart 和 thouchend 找出要“选择”的文本（带有彩色跨度）（实际上只有在极其受控的环境中才有可能（例如纯文本阅读器应用程序）。

请注意，这在 Firefox 和 Opera 中不起作用，因为在那里不会触发 selectionchange 事件，您需要在文档上使用 touchend 事件处理程序 + 停止所有其他 touchend 事件的冒泡以支持 Opera移动和火狐移动。 （归功于 select 不起作用而应该使用 selectionchange 的事实归功于 Tim Down）

【讨论】：

+1。但是，WebKit 不支持常规内容上的 select 事件（与表单输入相反）。您需要改用 selectionchange，它是几年前添加到 WebKit 的。 jsfiddle.net/EPbXQ

哦，我明白了，select 事件显然只针对输入元素触发。相应地更改了答案。

@DavidMulder，我以为你有解决方案。但是这些事件都没有在我运行 Android 4.1 的三星 Galaxy Nexus 上触发。但该事件是在我运行 Android 2.2 的 Samsung Fascinate 上触发的。关于 Galaxy Nexus，即使事件可能会触发。 getSelection() 始终为空。

您知道，我现在正在处理它。还有一件事，您可能不应该在 alpha 版本和自定义 rom 上进行开发，因为那从不具有代表性。

Android 4.0+ 浏览器严重混乱，如果我能鼓起动力，我会很快重试（对某些发现感到非常沮丧）。

【参考方案2】：

参考：

jsFiddle Demo with Plugin

我制作的上述 jsFiddle Demo 使用了一个插件来让您防止在 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');
        );
    
);

【讨论】：

另外，这个SO Answer 也可能有用。干杯！

【参考方案3】：

如果您的目标是阻止选择，您可以使用一些 CSS，例如

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