Menu
Firefox 3 can select MULTIPLE areas of text with JS. Is there a way doing this in Chrome and IE?
I really tried to find a way to select of multiple textareas in a web page in Chrome and IE9.
Infos at: http://help.dottoro.com/ljxsqnoi.php
Example at: http://jsfiddle.net/t3sWz/
Code FireFox3.5+ only... (but this is the question):
<html>
<head>
<meta charset="UTF-8">
<style>
#trigger { background: yellow }
</style>
</head>
<body>
<p id="test">
This is some text you can highlight by dragging or clicking below.
</p>
<span id="trigger">
Click here to select "This" and "some"
</span>
<a> - Firefox only :-(</a>
<br>
<br>
<br>
<br>
<br>
<input type="button" value="Get selection" onmousedown="getSelText()">
<form name=aform>
<textarea name="selectedtext" rows="5" cols="20">
</textarea>
</form>
<script>
var testCase = function() {
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
} // No support for IE
var textNode = document.getElementById('test').firstChild;
var theRange = document.createRange();
// select 0th–4th character
theRange.setStart(textNode, 0);
theRange.setEnd(textNode, 4);
// set user selection
userSelection.addRange(theRange);
var textNode = document.getElementById('test').firstChild;
var theRange = document.createRange();
// select 8th–12th character
theRange.setStart(textNode, 8);
theRange.setEnd(textNode, 12);
// set user selection
userSelection.addRange(theRange);
};
window.onload = function() {
var el = document.getElementById('trigger');
el.onclick = testCase;
};
function getSelText() {
var txt = '';
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
} else
return;
document.aform.selectedtext.value = txt;
}
</script>
</body>
361
- When selecting separate words throughout a web page, you can double-click while holding ctrl instead of dragging to select. - When making overlapping selections, ctrl+z will remove the combined selection. - Selections are sent to the clipboard and searched in the order they are selected.
The basic concept of selection is Range, that is essentially a pair of “boundary points”: range start and range end. A Range object is created without parameters: let range = new Range(); Then we can set the selection boundaries using range.
No. Of the major browsers, only Firefox supports multiple ranges within the user selection. Other browsers (WebKit, Opera, IE9) do have the Selection API to support multiple ranges but do not currently support it. WebKit is apparently not planning to add support any time soon. As to Opera and IE, I have no idea.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
