android - 移动网络 - 禁用长按/点击文本选择

Question

我已经看到/听说过所有关于使用 的变体禁用文本选择的信息user-select，但是这些都不能解决我遇到的问题。在 Android 上（我猜是在 iPhone 上），如果你点击并按住文本，它会突出显示它并显示一些小标志来拖动和选择文本。我需要禁用那些（见图）：

我试过-webkit-touch-callout无济于事，甚至尝试过无济于事的事情$('body').on('select',function(e){e.preventDefault();return;});。而且像这样的廉价技巧::selection:rgba(0,0,0,0);也行不通，因为隐藏这些也无济于事——选择仍然会发生，并且会破坏 UI。另外，我猜这些标志仍然存在。

任何想法都会很棒。谢谢！

Answer 1

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);

这将为每个浏览器禁用它。

Answer 2

参考：

带有插件的 jsFiddle 演示

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

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

示例 HTML：

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

<p> This text is selectable</p>

示例 jQuery：

$(document).ready(function(){

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

});

插件代码：

$.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');
        });
        return this;
    }
});

根据您的留言评论： I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

我会简单地使用不受此插件影响的包装器，但使用此插件保护它的文本内容。

要允许与文本块中的链接进行交互，您可以使用除链接之外的所有链接并仅为那些span tags添加类名，从而保留锚链接的选择和交互。.notSelectedspan tags

状态更新：这个更新的 jsFiddle确认您担心禁用文本选择时其他功能可能无法工作。在这个更新的 jsFiddle 中显示的是 jQuery Click 事件侦听器，它将在单击粗体文本时触发浏览器警报，即使该粗体文本不是文本可选择的。

Answer 3

-webkit-用户选择：无；直到 4.1 才支持 Android（对不起）。