I've been working with selection/range objects, and because to the incredible amount of inconsistencies between browsers for specific selection/range stuff (even more than the DOM) I was wondering if there was a framework that would help me get through them.
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.
In JavaScript, the range is a function that inputs the beginning and ending index and returns the list of all the integers. It represents the difference between the lowest and highest values. The range function helps in sorting all the numbers between starting and ending points.
In this code, we first get a copy of the selection menu control inside <template> , then assign it to the control variable. Next, we write the handler function for the onpointerup event of the element carrying the sample text. Inside the function, we get the selection and the selected string using document.
The anchor of a selection is the beginning point of the selection.
I've written a new range/selection library called Rangy that is similar in concept to IERange but goes quite a lot further. The core is pretty much complete and currently available to download. I'm currently bugfixing and documenting it and it should be only be a few weeks before a full release.
UPDATE 31 August 2011
Rangy is now stable and at version 1.2 (downloads page).
(Made an answer by request ;)
Take a look at IERange:
IERange is a feature-complete implementation of W3C DOM Ranges for Internet Explorer, allowing users to write one cross-browser version of their range manipulation code.
Supports Range APIs:
document.createRange()
startContainer
, startOffset
, endContainer
, endOffset
, commonAncestorContainer
, collapsed
setStart()
, setEnd()
, setStartBefore()
, setStartAfter()
, setEndBefore()
, setEndAfter()
, selectNode()
, selectNodeContents()
, collapse()
insertNode()
, surroundContents()
extractContents()
, cloneContents()
, deleteContents()
compareBoundaryPoints()
, cloneRange()
, createContextualFragment()
, toString()
Supports Selection APIs:
window.getSelection()
addRange()
, removeAllRanges()
, getRangeAt()
, toString()
fieldselection is a very usable jquery plugin for selection/range manipulation.
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