Làm thế nào để vô hiệu hóa lựa chọn một số văn bản trong div?

Question

Hãy nói rằng tôi có một văn bản với nhãn hiệu, chẳng hạn như:

Và tôi muốn vô hiệu hoá chọn như vậy mà bắt đầu hoặc kết thúc lựa chọn không nằm trong dấu. Do đó, tất cả những lựa chọn nên có thể:

Mặt khác, những lựa chọn nên được vô hiệu hóa:

Cho đến nay, tôi chỉ cố gắng sử dụng một số css đơn giản,

mark { 
 
    -khtml-user-select: all; 
 
    -webkit-user-select: all; 
 
    -o-user-select: all; 
 
    user-select: all; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Có cách nào để làm điều này? Bất kỳ câu trả lời sẽ được đánh giá cao!

---

Tôi đã đạt được những gì tôi muốn làm, vì vậy tôi chia sẻ ở đây.

function checkSelection() { 
 
    var sel = window.getSelection(); 
 
    var marks = document.getElementsByTagName('mark'); 
 
    for(var i = 1; i < sel.rangeCount; i++) { 
 
    sel.removeRange(sel.getRangeAt(i)); 
 
    } 
 
    var range = sel.getRangeAt(0); 
 
    var startnode = range.startContainer; 
 
    var endnode = range.endContainer; 
 
    for (var i = 0; i < marks.length; i++) { 
 
    \t if (marks[i].contains(startnode)) { 
 
     range.setStartBefore(startnode); 
 
    } 
 
    \t if (marks[i].contains(endnode)) { 
 
     range.setEndAfter(endnode); 
 
    } 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Answer 1

Tôi không nghĩ rằng nó sẽ có thể làm với CSS một mình, bạn có nhiều khả năng sẽ cần JavaScript để phát hiện những yếu tố người dùng bắt đầu lựa chọn.

---

Những gì tôi đã làm là tôi đã sử dụng phương pháp containsNode từ API Selection Tool (một dự thảo Working, có thể không làm việc với tất cả các trình duyệt nào, và có thể được tán thành) để phát hiện xem các phạm vi lựa chọn một trong hai chứa toàn bộ phần tử được đánh dấu hoặc hoàn toàn không. Nếu lựa chọn chỉ chứa một phần của một phần tử được đánh dấu, nó sẽ xóa lựa chọn bằng cách sử dụng phương thức removeAllRanges.

function checkSelection() { 
 
    var sel = window.getSelection() 
 
    var marks = document.getElementsByTagName('mark') 
 
    for (var i = 0; i < marks.length; i++) { 
 
    if (sel.containsNode(marks[i], false) !== sel.containsNode(marks[i], true)) 
 
     sel.removeAllRanges() // clear selection 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

mark { 
 
    background: yellow; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

Lưu ý rằng bạn sẽ cần phải nắm bắt tất cả các phương pháp lựa chọn mà bạn muốn, cho dù bằng sự kiện chuột và các sự kiện liên lạc (tất cả những gì tôi bao gồm), lựa chọn caret bàn phím, hoặc lựa chọn chương trình.

---

Điều này có thể được mở rộng và điều chỉnh theo ý thích của bạn, nhưng đây là ảnh đẹp nhất của tôi khi sao chép hành vi bạn muốn từ thông số kỹ thuật của bạn. Đoạn mã trên không hoạt động chính xác mọi lúc nếu một trong các giới hạn của lựa chọn bắt đầu hoặc kết thúc ở rìa của một vùng được đánh dấu, nhưng đoạn mã phải thể hiện khái niệm cơ bản đằng sau những gì sẽ hoạt động, chỉ với một chút tinh chỉnh các trường hợp.

Answer 2

thuộc tính CSS sử dụng chọn chưa chính thức và nó chỉ được hỗ trợ bởi các trình duyệt mới nhất.

Anyways bạn có thể sử dụng user-select: none; và kèm theo tất cả các văn bản mà không thể được lựa chọn bên trong một thẻ

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

span Nhưng bạn có thể thử một cái gì đó như thế này

.unselectable { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<p>This text can be selected, But <span class="unselectable">this</span> can only be <span class="unselectable">partially se</span>lected</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select