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

问题描述

我已经看到/听到的所有关于禁用文本选择与的变化用户选择，但这些都不是在为我有这个问题。在Android（我$在iPhone p $ psume），如果你点击并按住文本，它突出它，并带来了小旗子拖动，选择文本。我需要禁用这些（见图片）：

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-触摸标注无济于事，甚至试图像 $（'身体'）。在（ '选择'，功能（E））{ÉpreventDefault（）;回报率。}; 无济于事。而廉价的小把戏，比如 ::选择：RGBA（0,0,0,0）; 将不能工作，因为隐藏这些不会帮助 - 选择仍然发生它破坏了用户界面。另外，我猜这些标志仍然会存在。

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演示我做了使用插件，让你的的 prevent从任何文本块被选中的在机器人或的iOS 设备（与桌面浏览器也是如此）。

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

});

插件code：

$.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标签为所有，但该链接并添加类的名称 .notSelected 对于那些 span标签只，因此preserving选择和锚链接的互动。

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的Click事件侦听器会触发一个浏览器触发警报，如果粗体文字被点击，即使大胆的文字不是文本可选择的。

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.

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