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

20

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

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

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

    
задан Bradley Orego 28.06.2012 в 06:07
источник
  • Хммм. Похоже, что скрипка работала, когда я просто тестировал ее на своем телефоне, но я не уверен на 100%, что это сработает для меня на производстве - мне все равно нужно будет запускать события (особенно, touchstart, touchmove и touchhend) на элементы. Хотя, учитывая, что это действует только на selectstart, мы могли бы быть хорошими. Я проведу это сегодня вечером и вернусь к вам :) –  Bradley Orego 06.07.2012 в 19:44

3 ответа

15

Справка:

jsFiddle Demo с плагином

В приведенном выше 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 Нажмите «Слушатель событий», который будет запускать оповещение обозревателя, если щелкнуть жирным шрифтом, даже если этот выделенный текст не выбран по тексту.

    
ответ дан arttronics 06.07.2012 в 21:12
  • Это НЕ работает для моего Android 2.3.3 ,,, Просто отправился в ваш jsFiddle и попробовал его. Выбрали весь текст. Есть идеи? –  Oneezy 20.02.2013 в 10:29
  • Спасибо за отзыв. После загрузки веб-страницы JsFiddle нажмите кнопку RUN перед тестированием. Кроме того, хотя вы технически можете выбрать весь текст, сделать копию этого и вставить в следующий документ не будет вставлять заблокированную часть текста. Если все же это проблема, я попытаюсь получить доступ к устройству Android с этим номером версии. Мысли? –  arttronics 15.11.2013 в 06:02
  • +1 Фантастический, спасибо @arttronics! Какая вариация может помешать контекстному меню показывать «длинное касание»? –  Ian Campbell 15.06.2014 в 07:48
28
-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);

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

    
ответ дан CoreyRS 28.06.2012 в 06:11
  • Не быть злым, но вы вообще прочитали вопрос? У меня есть именно то, что оштукатурено на всем моем CSS (от отдельных идентификаторов / классов до самого тела и *), и я прямо заявил, что скрытие подсветки - плохая идея .... –  Bradley Orego 28.06.2012 в 06:42
  • Да, я прочитал ваше сообщение. Теперь вы действительно пробовали код? Он добавляет -webkit-touch-callout и правильный способ предотвращения наложения подсветки с использованием -webkit-tap-highlight-color. Я использую это в своих веб-приложениях, и он отлично работает - нет контекстного меню, нет подсветки и выбора. –  CoreyRS 28.06.2012 в 07:19
  • Я полагаю, что я не упоминал об этом первоначально, но у меня была -webkit-touch-callout: none; там все время. Единственное, что сделал бы -webkit-tap-highlight-color, сделало бы подсветку прозрачной, а не отключить ее. Сначала я не позаботился о коде, потому что это было не то, что я раньше не видел, но просто чтобы успокоить вас, я попробовал, и это не сработало. Какие ОС / устройства вы тестировали на этом? Не работает на Android 2.3 или 3.0 ... –  Bradley Orego 28.06.2012 в 07:30
  • Не работает в браузере Android 4.4 ... –  HischT 11.04.2014 в 13:48
  • Спасибо! Отлично работает для меня. В Android 4.4.4 / Chrome –  CodeBrauer 22.08.2014 в 11:26
2

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

    
ответ дан John Reck 28.06.2012 в 06:44
  • Итак, нет способа избавиться от этого? :( –  Bradley Orego 28.06.2012 в 06:49