移动网络 - 禁用长按/轻敲文本选择

Question

我已经看到/听到了所有关于禁用文本选择的变化user-select,但是没有一个能解决我遇到的问题.在Android上(我假设在iPhone上),如果你点击并保持文本,它会突出显示它并带来一些标记来拖动和选择文本.我需要禁用它们(见图):

我试图-webkit-touch-callout无济于事,甚至尝试过$('body').on('select',function(e){e.preventDefault();return;});无济于事的事情.像这样的廉价技巧::selection:rgba(0,0,0,0);也无济于事,因为隐藏它们无济于事 - 选择仍然会发生并且会破坏用户界面.另外我猜这些旗帜仍然存在.

任何想法都会很棒.谢谢!

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演示使用了一个插件,可以防止在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除链接之外的所有链接,并仅为.notSelected这些链接添加类名span tags,从而保留锚点链接的选择和交互.

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