Class InputRange

A fragment of a document that can contain only pieces of a single text node. Does not implement Range methods that operate with other nodes or directly mutate the contents of the Range.

Hierarchy

InputRange

Implements

ReadonlyTextRange

Index

Constructors

constructor

new InputRange(element, startOffset?, endOffset?): InputRange
Construct a new InputRange.
Parameters
- element: InputElement
  
  The target input element that contains the content for the range.
- startOffset: number = 0
  
  The inclusive 0-based start index for the range. Will be adjusted to fit in the input contents.
- endOffset: number = startOffset
  
  The exclusive 0-based end index for the range. Will be adjusted to fit in the input contents.
Returns InputRange
- Defined in src/input-range.ts:38

Accessors

collapsed

get collapsed(): boolean
Returns true if the start is equal to the end of this range.

Returns boolean
Implementation of ReadonlyTextRange.collapsed
- Defined in src/input-range.ts:58

commonAncestorContainer

get commonAncestorContainer(): InputElement
Always returns the containing input element.

Returns InputElement
Implementation of ReadonlyTextRange.commonAncestorContainer
- Defined in src/input-range.ts:63

endContainer

get endContainer(): InputElement
Always returns the containing input element.

Returns InputElement
Implementation of ReadonlyTextRange.endContainer
- Defined in src/input-range.ts:68

startContainer

get startContainer(): InputElement
Always returns the containing input element.

Returns InputElement
Implementation of ReadonlyTextRange.startContainer
- Defined in src/input-range.ts:73

startOffset

get startOffset(): number
Returns range's start offset.

MDN Reference

Returns number
Implementation of ReadonlyTextRange.startOffset
- Defined in src/input-range.ts:77

endOffset

get endOffset(): number
Returns range's end offset.

MDN Reference

Returns number
Implementation of ReadonlyTextRange.endOffset
- Defined in src/input-range.ts:81

Methods

`Static` fromSelection

fromSelection(input): InputRange
Create a new range from the current user selection. If the input is not focused, the range will just be the start of the input (offsets 0 to 0).

This can be used to get the caret coordinates: if the resulting range is collapsed, the location of the getBoundingClientRect will be the location of the caret caret (note, however, that the width will be 0 in this case).
Parameters
- input: InputElement
Returns InputRange
- Defined in src/input-range.ts:52

setStartOffset

setStartOffset(offset): void
Update the inclusive start offset. Will be adjusted to fit within the content size.
Parameters
- offset: number
Returns void
Implementation of ReadonlyTextRange.setStartOffset
- Defined in src/input-range.ts:86

setEndOffset

setEndOffset(offset): void
Update the exclusive end offset. Will be adjusted to fit within the content size.
Parameters
- offset: number
Returns void
Implementation of ReadonlyTextRange.setEndOffset
- Defined in src/input-range.ts:91

collapse

collapse(toStart?): void
Collapse this range to one side.
Parameters
- toStart: boolean = false
  
  If true, will collapse to the start side. Otherwise, will collapse to the end.
Returns void
Implementation of ReadonlyTextRange.collapse
- Defined in src/input-range.ts:99

cloneContents

cloneContents(): DocumentFragment
Returns a DocumentFragment containing a new Text node containing the content in the range.

Returns DocumentFragment
Implementation of ReadonlyTextRange.cloneContents
- Defined in src/input-range.ts:105

cloneRange

cloneRange(): InputRange
Create a copy of this range.

Returns InputRange
- Defined in src/input-range.ts:110

getBoundingClientRect

getBoundingClientRect(): DOMRect
Obtain one rect that contains the entire contents of the range. If the range spans multiple lines, this box will contain all pieces of the range but may also contain some space outside the range.

Returns DOMRect

See
https://iansan5653.github.io/dom-input-range/demos/playground/
Implementation of ReadonlyTextRange.getBoundingClientRect
- Defined in src/input-range.ts:119

getClientRects

getClientRects(): DOMRectList
Obtain the rects that contain contents of this range. If the range spans multiple lines, there will be multiple bounding boxes. These boxes can be used, for example, to draw a highlight over the range.

Returns DOMRectList

See
https://iansan5653.github.io/dom-input-range/demos/playground/
Implementation of ReadonlyTextRange.getClientRects
- Defined in src/input-range.ts:128

toString

toString(): string
Get the contents of the range as a string.

Returns string
Implementation of ReadonlyTextRange.toString
- Defined in src/input-range.ts:133

getStyleClone

getStyleClone(): InputStyleCloneElement
Get the underlying InputStyleClone instance powering these calculations. This can be used to listen for updates to trigger layout recalculation.

Returns InputStyleCloneElement
- Defined in src/input-range.ts:141

Class InputRange

Hierarchy

Implements

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

element: InputElement

startOffset: number = 0

endOffset: number = startOffset

Returns InputRange

Accessors

collapsed

Returns boolean

commonAncestorContainer

Returns InputElement

endContainer

Returns InputElement

startContainer

Returns InputElement

startOffset

Returns number

endOffset

Returns number

Methods

Static fromSelection

Parameters

input: InputElement

Returns InputRange

setStartOffset

Parameters

offset: number

Returns void

setEndOffset

Parameters

offset: number

Returns void

collapse

Parameters

toStart: boolean = false

Returns void

cloneContents

Returns DocumentFragment

cloneRange

Returns InputRange

getBoundingClientRect

Returns DOMRect

See

getClientRects

Returns DOMRectList

See

toString

Returns string

getStyleClone

Returns InputStyleCloneElement

Settings

Member Visibility

Theme

On This Page

`Static` fromSelection