text-field-edit

text-field-edit

Insert text in a textarea and input[type=text] (supports Firefox and Undo, where possible)

The text will be inserted after the cursor or it will replace any text that's selected, acting like a paste would.

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

• it doesn't break the undo history (in supported browsers)
• 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') in Chrome (which has Undo support) and it replicates its behavior in Firefox (without Undo support until this bug is solved).

If you need IE support, use insert-text-at-cursor.

Install

You can just download the standalone bundle

Or use npm:

npm install text-field-edit

// This module is only offered as a ES Module
import insertText from 'text-field-edit';

Usage

Insert text at the cursor, replacing any possible selected text:

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

This will wrap the selected text (if any) with ** on both sides:

const textarea = document.querySelector('textarea');
const button = document.querySelector('.js-markdown-make-text-bold');
button.addEventListener(event => {
	// Don't use `getSelection()` if you want Firefox support
	const selectedText = value.slice(
		textarea.selectionStart,
		textarea.selectionEnd
	);
	insertText(textarea, '**' + selectedText + '**');
});

This will replace the entire content, equivalent to field.value = 'New text!' but with undo support:

const textarea = document.querySelector('textarea');
textarea.select(); // The text needs to be selected so it will be replaced
insertText(textarea, 'New text!');

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.