Ghi đè hành vi gốc khi chọn văn bản trên thiết bị di động

Question

Tôi muốn biết liệu có cách ghi đè hành vi gốc khi bạn chọn văn bản trên trình duyệt dành cho thiết bị di động hay không. Tôi đang cố gắng hỗ trợ cả thiết bị iPhone và Android bằng cách cung cấp thanh tác vụ của riêng tôi.

Bất kỳ mẹo nào?

Answer 1

Mặc dù bạn hoàn toàn có thể sử dụng sự kiện selectionchange để hiển thị 'thanh hành động' cùng với chức năng gốc, nếu bạn muốn 'thay thế' hành vi gốc, bạn cần giả mạo toàn bộ lựa chọn từ đầu hoặc sử dụng selectionchange sự kiện và lựa chọn thứ hai được tạo ra khi bạn quấn văn bản đã chọn với phần tử nhịp màu và hủy bỏ lựa chọn thực (trong khi hiển thị thanh tác vụ), sự cố với phương pháp này sẽ là 1) thanh hành động gốc có thể hiển thị cho chia thứ hai và 2) trải nghiệm sẽ khác với những gì người dùng được sử dụng để có thể có các hiệu ứng nguy hiểm. Mặt khác, nếu bạn muốn thực hiện các lựa chọn từ đầu, bạn nên sử dụng thuộc tính css user-select để tắt lựa chọn văn bản và hình tiếp theo dựa trên touchstart và chạm vào văn bản để 'chọn' (có nhịp màu) (thực tế chỉ có thể trong môi trường được kiểm soát cực kỳ (ví dụ như ứng dụng đọc văn bản)). Xin lưu ý rằng điều này sẽ không hoạt động trong Firefox và Opera vì sự kiện selectionchange không được kích hoạt ở đó và bạn sẽ cần sử dụng trình xử lý sự kiện touchend trên tài liệu + dừng bọt của tất cả các sự kiện chạm khác để hỗ trợ opera di động và firefox di động. (Tín dụng cho thực tế là select không hoạt động và selectionchange nên được sử dụng đi vào Tim Down)

Answer 2

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 máy tính để bàn quá).

Điều này làm không can thiệp vào đánh dấu khác mà bạn có thể có, chẳng hạn như trình nghe sự kiện jQuery .click(); như được minh họa trong jsFiddle.

Dễ sử dụng và đây là đánh dấu mẫu khi 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:

$(document).ready(function(){ 

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

}); 

Hoàn jQuery 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'); 
     }); 
    } 
}); 

Answer 3

Nếu yo Mục đích của ur là ngăn chặn lựa chọn, bạn có thể sử dụng một số CSS như

body 
{ 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
}