6

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

有小费吗？

4

3 回答 3

5

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

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

于 2012-07-02T08:01:30.220 回答
2

参考：

带有插件的 jsFiddle 演示

我制作的上述 jsFiddle Demo 使用插件来允许您防止在Android或iOS设备（以及桌面浏览器）中选择任何文本块。

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

它很容易使用，这里是安装 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');
        });
    }
});
于 2012-07-06T10:31:11.423 回答
0

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

body 
{ 
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
于 2012-07-06T16:01:36.830 回答