Is it possible to select text from multiple elements?
Question
Using a java script, you can make a selection. This will be equivalent to selecting with the mouse cursor. The code that I added to the question makes a selection of each element inside the container you click on, but the previous selection disappears. Can this be changed?
const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); });
<!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>
EDIT: For better understanding, I added a second snippet that does what I would like to get, but without using a window.getSelection().addRange() .
const selectElement = (element) => { element.style.backgroundColor = 'blue'; element.style.color = 'white'; } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); });
<!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>
1 answers
solution1
0 2021-11-30 20:00:29
Moving focus and/or clicking on elements typically (always?) removes the previous selection as per pretty standard UI selection behaviour.
If you wanted to retain the previous selection range(s) then you will need to store them separately and re-add them to the window's selection ranges.
Obviously this is counter intuitive to any user expectation but I'm not going to presume anything about why you want this:)
var ranges = []; const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); ranges.push(range); const selection = window.getSelection(); ranges.forEach(r => selection.addRange(r)); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { selectElement(event.target); });
<!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>
Note that if you click outside your container div, the selections are cleared - this is the standard behaviour and since your event listener is only on the div, the selections are not restored. If you want to change that, move your event listener to the body.
solution2
0 ACCPTED 2021-11-30 20:17:50
This can only be done in the FireFox browser.
Check out the Selection.addRange() page on the MDN Web Docs.
You will see a note:
Note: Currently only Firefox supports multiple selection ranges, other browsers will not add new ranges to the selection if it already contains one.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.