移动网络 - 禁用长触摸/点按文本选择 [英] Mobile Web - Disable long-touch/taphold text selection

问题描述

我已经看到/听到了关于使用 user-select 的变体禁用文本选择，但是没有一个能解决我遇到的问题。在Android（我假设在iPhone上），如果你点击并按住文本，它会突出显示它，并带来了一些标志拖动和选择文本。我需要停用这些（请参阅图片）：

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):

我尝试过 -webkit-touch-callout 无法使用， code> $（'body'）。on（'select'，function（e）{e.preventDefault（）; return;}）; 而且像 :: selection：rgba（0,0,0,0）; 这样的廉价技巧也不会工作，因为隐藏这些不会帮助 - 选择仍然发生并且它破坏了UI。加上我猜这些标志仍然在那里。

I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.

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

Any thoughts would be great. Thanks!

推荐答案

参考：

带插件的jsFiddle演示

上述jsFiddle演示使用插件允许您 防止在 Android 或中选择

The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).

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

It's easy to use and here is the sample markup once the jQuery plugin is installed.

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;
    }
});

根据您的留言评论： 我仍然需要能够触发元素上的事件（特别是touchstart，touchmove和touchend）。

只会使用不受此插件影响的包装器，而且其文本内容使用此插件进行保护。

I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.

要允许与文本块中的链接进行交互，可以对除链接以外的所有对象使用 span标签，并添加类名。未选中 c> c>，因此保留了锚链接的选择和交互。

To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.

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

Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.

这篇关于移动网络 - 禁用长触摸/点按文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！