Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
dom-input-range
Advanced tools
InputRange
The Range
web API provides access to a slice of a document, including some very useful functions for obtaining the coordinates of the contents of that slice (getClientRects
and getBoundingClientRect
).
These could be extremely powerful when used in tandem with form input fields as they can allow for annotating text without having to wrap it in a span
. Unfortunately, the contents of <input>
and <textarea>
elements remain inaccessible to this API because they are not rendered like regular Text
nodes.
This library aims to provide a solution to that through a new InputRange
class that implements a subset of the Range
API.
Install the package:
npm install dom-input-range
A new InputRange
can be constructed with an element and offsets. For example, to get the coordinates of the bounding box around the first ten characters of a textarea
:
import { InputRange } from "dom-input-range";
new InputRange(element, 0, 10).getBoundingClientRect();
There is also a convenient fromSelection
method for creating a range from the active selection. This can also be used to get the coordinates of the caret:
import { InputRange } from "dom-input-range";
InputRange.fromSelection(element).getClientRects();
For the full api, see the docs for InputRange
.
<textarea>
to see the difference between getBoundingClientRect
and getClientRects
This API is focused on providing an intuitive way to obtain the coordinates of text inside a form field element. It also implements a few other Range
methods for consistency with the browser API, but it does not implement the entire class:
InputRange
cannot cross Node
boundaries, so any method that works with Node
s is not implementedsetStartOffset
and setEndOffset
value
directly insteadBehind the scenes, InputRange
works by creating a 'clone' element that copies all of the styling and contents from the input element. This clone is then appended to the document and hidden from view so it can be queried. This low-level API is exposed as InputStyleCloneElement
for advanced use cases.
Mounting a new element and copying styles can have a real performance impact, and this API has been carefully designed to minimize that. The clone element is only created once per input element, and is reused for all subsequent queries — even if new InputRange
instances are constructed. The clone element is automatically discarded after it is not queried for a while.
There is practically no overhead to constructing new InputRange
instances - whether or not you reuse them is entirely up to what best fits with your usage.
If you do notice any performance issues, please create a new issue.
FAQs
Range-like API for input and textarea contents
The npm package dom-input-range receives a total of 1,767 weekly downloads. As such, dom-input-range popularity was classified as popular.
We found that dom-input-range demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.