移動網絡 - 禁用長按/伸縮文本選擇

我已經看到/聽到關於禁止選擇user-select的變體的所有內容，但這些都不能解決我遇到的問題。在Android上（我假定在iPhone上），如果你點擊並按住文字，它會突出顯示它，並帶出一些小標記來拖拽和選擇文字。我需要禁用這些（見圖片）：移動網絡 - 禁用長按/伸縮文本選擇

screenshot

我已經試過-webkit-touch-callout無濟於事，甚至試圖之類的東西$('body').on('select',function(e){e.preventDefault();return;});無濟於事。像::selection:rgba(0,0,0,0);這樣的廉價技巧也不行，因爲隱藏這些技巧不會有幫助 - 選擇仍然會發生，並且會破壞用戶界面。另外我猜這些標誌仍然會在那裏。

任何想法都會很棒。謝謝！

來源

2012-06-28 Bradley Orego

嗯。小提琴似乎工作時，我只是在我的手機上測試它，但我不是100％肯定它會在我的生產工作 - 我仍然需要能夠觸發事件（特別是，'touchstart'，'touchmove'，和'touchend'）的元素。雖然，考慮到這只是在'selectstart'上採取行動，我們可能會很好。我會在今晚測試一下，回到你的身邊:) –

參考：

jsFiddle Demo with Plugin

上面的jsfiddle演示我提出使用插件以允許您防止任何文本塊被選中在的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，從而保持錨鏈接的選擇和互動。

狀態更新：此更新jsFiddle確認您擔心在禁用文本選擇時可能無法使用其他功能。在此更新的jsFiddle中顯示的是jQuery Click Event偵聽器，它將在單擊粗體文本時觸發瀏覽器警報，即使粗體文本不是文本可選。

來源

2012-07-06 19:12:13 arttronics

這不適用於我的Android 2.3.3 ,,,剛剛去了你的jsFiddle並嘗試了它。選中所有的文本。任何想法？ – Oneezy

感謝您的反饋.JsFiddle網頁加載後，點擊在測試前，運行按鈕也是如此，雖然你在技術上可以選擇所有的文本，但是複製並粘貼到下一個文檔中將不會粘貼被阻止的文本部分。如果仍然存在這個問題，我會嘗試訪問Android設備與該版本號。想法？ – arttronics

+1非常棒，謝謝@arttronics！哪種變體可能會阻止上下文菜單顯示在「長時間觸摸」上？ –

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

這將禁用它爲每個瀏覽器去。

來源

2012-06-28 04:11:14 CoreyRS

不是什麼意思，但是你是否讀過這個問題？我確切地說已經貼滿了我的所有CSS（從單個ID /類一直到正文和'*'），並且我明確聲明隱藏突出顯示是一個糟糕的想法.... –

是的，我讀過你的帖子。現在，你真的嘗試了代碼嗎？它添加了-webkit-touch-callout，並使用-webkit-tap-highlight-color來防止高亮疊加的正確方法。我在我的webapps中使用它，它工作正常 - 沒有內容菜單，沒有突出顯示和沒有選擇。 – CoreyRS

我想我最初沒有提到過，但我在這裏也有'-webkit-touch-callout：none;'。 '-webkit-tap-highlight-color'只會使高光透明，__not__禁用它。我最初並沒有打擾到代碼，因爲它不是我之前沒有見過的，但只是爲了安撫你，我嘗試了它，但它不起作用。你測試過哪些操作系統/設備？不適用於Android 2.3或3.0 ... –

-webkit-user-select：none;在4.1版本之前不支持Android（對不起）。

來源

2012-06-28 04:44:17

那麼沒有辦法擺脫/阻止它？！ :( –

移動網絡 - 禁用長按/伸縮文本選擇

回答

相關問題