Мобильный Интернет - отключить выбор текста с длинным нажатием/нажатием

Я видел/слышал все об отключении выбора текста с вариациями user-select, но никто из них не работает для проблемы, с которой я сталкиваюсь. На Android (и я полагаюсь на iPhone), если вы нажимаете и удерживаете текст, он выделяет его и отображает маленькие флаги для перетаскивания и выбора текста. Мне нужно отключить их (см. Изображение):

Я пробовал -webkit-touch-callout безрезультатно и даже пробовал такие вещи, как $('body').on('select',function(e){e.preventDefault();return;});, безрезультатно. И дешевые трюки вроде ::selection:rgba(0,0,0,0); тоже не будут работать, так как скрывать их не поможет - выбор по-прежнему происходит и нарушает пользовательский интерфейс. Плюс я предполагаю, что эти флаги все еще будут там.

Любые мысли были бы замечательными. Спасибо!

Ответ 1

Справка:

jsFiddle Demo with Plugin

В приведенном выше 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 для всех, кроме ссылки, и добавить имя класса .notSelected только для span tags, тем самым сохраняя выбор и взаимодействие ссылки anchors.

Обновление статуса:. Этот обновленный jsFiddle подтверждает, что вы можете сказать, что, возможно, другие функции могут не работает, когда выбор текста отключен. Показанный в этом обновленном jsFiddle является jQuery Нажмите "Слушатель событий", который будет запускать оповещение обозревателя, если щелкнуть жирным шрифтом, даже если этот выделенный текст не выбран по тексту.

Ответ 2

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

Это отключит его для каждого браузера.

Ответ 3

-webkit-пользователь выберите: нет; не поддерживался на Android до 4.1 (извините).