Mobile Web - Vô hiệu hoá dài touch/taphold lựa chọn văn bản

Question

Tôi đã nhìn thấy/nghe tất cả về việc vô hiệu hóa lựa chọn văn bản với các biến thể của user-select, nhưng không ai trong số những người đang làm việc cho các vấn đề tôi gặp phải. Trên Android (và tôi giả sử trên iPhone), nếu bạn chạm và giữ trên văn bản, nó sẽ làm nổi bật nó và sẽ trả về các cờ nhỏ để kéo và chọn văn bản. Tôi cần phải vô hiệu hóa những người (xem hình):

Tôi đã thử -webkit-touch-callout không có kết quả, và thậm chí đã cố gắng những thứ như $('body').on('select',function(e){e.preventDefault();return;}); vô ích. Và các thủ thuật giá rẻ như ::selection:rgba(0,0,0,0); sẽ không làm việc, hoặc, như ẩn này sẽ không giúp đỡ - lựa chọn vẫn xảy ra và nó sẽ phá vỡ giao diện người dùng. Thêm vào đó tôi đoán những lá cờ đó vẫn sẽ ở đó.

Bất kỳ suy nghĩ sẽ là tuyệt vời. Cảm ơn!

Answer 1

tham khảo:

jsFiddle Demo with Plugin

Trên đây jsFiddle Demo tôi đã sử dụng một Plugin cho phép bạn ngăn chặn bất kỳ khối văn bản từ được chọn trong Android hoặc iOS thiết bị (cùng với các trình duyệt trên máy tính để bàn).

Thật dễ dàng để sử dụng và đây là đánh dấu mẫu một lần plugin jQuery được cài đặt.

HTML mẫu:

<p class="notSelectable">This text is not selectable</p> 

<p> This text is selectable</p> 

mẫu jQuery: Mã

$(document).ready(function(){ 

    $('.notSelectable').disableSelection(); 

}); 

Plugin:

$.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; 
    } 
}); 

mỗi bình luận thông điệp của bạn:I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

tôi sẽ chỉ đơn giản là sẽ sử dụng một wrapper đó là không bị ảnh hưởng bởi plugin này, nhưng đó là văn bản nội dung được bảo vệ sử dụng plugin này.

Để cho phép tương tác với một liên kết trong một khối văn bản, bạn có thể sử dụng cho tất cả span tags nhưng liên kết và thêm tên lớp .notSelected cho chỉ những span tags, do đó duy trì lựa chọn và tương tác của liên kết neo.

Cập nhật trạng thái: Cập nhật này jsFiddle xác nhận bạn lo ngại rằng có lẽ các chức năng khác có thể không hoạt động khi chọn văn bản bị tắt. Được hiển thị trong jsFiddle cập nhật này là jQuery Click Event listener sẽ kích hoạt Cảnh báo trình duyệt khi Chữ in đậm được nhấp vào, ngay cả khi Chữ in đậm đó không thể chọn văn bản.

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

Điều này sẽ tắt nó cho mọi trình duyệt.

Answer 3

-webkit-user-chọn: none; không được hỗ trợ trên Android cho đến 4.1 (xin lỗi).