移动网络 - 禁用长按/点按文本选择 [英] 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 无济于事，甚至尝试过诸如 $('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 Demo 使用了一个插件来让您防止在 Android 或 中选择任何文本块>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();

});

插件代码:

$.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).em>

Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

我只想使用包装器，它不受此插件影响，但它的文本内容使用此插件受到保护.

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仅跨标签，从而保留锚链接的选择和交互.

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屋！