text-field-edit

Insert text in a <textarea>, <input> and contenteditable (including Undo support)

You should use this instead of setting the field.value directly because:

• it doesn't break the undo history
• it fires an input event (with event.inputType === 'insertText')
• it's the most efficient way of adding/replacing selected text in a field
• it's cross-browser (modern browsers)

It uses document.execCommand('insertText') under the hood and it automatically focuses/blurs the field you pass.

Install

You can download the standalone bundle

Or use npm:

npm install text-field-edit

import textFieldEdit from 'text-field-edit';

// Alternatively only import the specific methods
import {
	insertTextIntoField,
	setFieldText,
	getFieldSelection,
	wrapFieldSelection,
	replaceFieldText,
} from 'text-field-edit';

Usage

Insert text at the cursor, replacing any possible selected text, acting like a paste would:

const input = document.querySelector('input');
const button = document.querySelector('.js-add-signature');
button.addEventListener(event => {
	textFieldEdit.insert(input, 'Made by 🐝 with pollen.');
});

This will act like field.value = 'New value' but with undo support and by firing the input event:

const textarea = document.querySelector('textarea');
const resetButton = document.querySelector('.js-markdown-reset-field');
resetButton.addEventListener(event => {
	textFieldEdit.set(textarea, 'New value');
});

API

textFieldEdit.insert(field, text)

Inserts text at the cursor’s position, replacing any selection.

const field = document.querySelector('input[type="text"]');
textFieldEdit.insert(field, '🥳');
// Changes field's value from 'Party|' to 'Party🥳|' (where | is the cursor)

field

Type: HTMLTextAreaElement | HTMLInputElement or any contenteditable element

text

Type: string

The text to insert at the cursor's position.

textFieldEdit.set(field, text)

Replaces the entire content, equivalent to field.value = 'New text!' but with undo support and by firing the input event:

const textarea = document.querySelector('textarea');
textFieldEdit.set(textarea, 'New text!');

field

Type: HTMLTextAreaElement | HTMLInputElement or any contenteditable element

text

Type: string

The new value that the field will have.

textFieldEdit.replace(field, searchValue, replacement)

Finds and replaces strings and regular expressions in the field’s value, like field.value = field.value.replace() but leaves the last replacement selected like a text editor would.

Similar to String#replace

const textarea = document.querySelector('textarea');
textarea.value = 'Hello world';
textFieldEdit.replace(textarea, 'Hello', 'Ciao');
// Changes field's value from 'Hello world' to '|Ciao| world' (where | marks the selected text)

field

Type: HTMLTextAreaElement | HTMLInputElement (not available on contenteditable)

searchValue

Type: string | RegExp

The text to replace in the field’s value.

replacement

Type: string | function

The text that will replace searchValue or a callback function that matches the signature in String#replace.

Note: replacement patterns (replace(field, /hello (world)/, 'ciao $1')) aren't supported.

textFieldEdit.wrapSelection(field, wrappingText, endWrappingText?)

Adds the wrappingText before and after field’s selection (or cursor). If endWrappingText is provided, it will be used instead of wrappingText on the right.

const field = document.querySelector('textarea');
textFieldEdit.wrapSelection(field, '**');
// Changes the field's value from 'I |love| gudeg' to 'I **|love|** gudeg' (where | marks the selected text)

const field = document.querySelector('textarea');
textFieldEdit.wrapSelection(field, '(', ')');
// Changes the field's value from '|almost| cool' to '(|almost|) cool' (where | marks the selected text)

field

Type: HTMLTextAreaElement | HTMLInputElement or any contenteditable elements

wrappingText

Type: string

The string to prepend to the selection.

endWrappingText

Type: string

The string to append to the selection. If not provided, wrappingText will be used.

textFieldEdit.getSelection(field)

Utility method to get the selected text in a field or an empty string if nothing is selected.

const field = document.querySelector('textarea');
textFieldEdit.getSelection(field);
// => 'almost'
// If the field's value is '|almost| cool' (where | marks the selected text)

field

Type: HTMLTextAreaElement | HTMLInputElement

Related

• indent-textarea - Add editor-like tab-to-indent functionality to <textarea>, in a few bytes. Uses this module.
• fit-textarea - Automatically expand a <textarea> to fit its content, in a few bytes.
• Refined GitHub - Uses this module.