text-field-edit
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2022 • Public • Published

    text-field-edit

    Insert text in a <textarea> and <input> (including Undo in most browsers)

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

    • it doesn't break the undo history (in Chrome, Firefox, and Safari)
    • 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. Firefox added support for Undo in Firefox 89 (June 2021). If you need IE support, use insert-text-at-cursor.

    Install

    You can download the standalone bundle

    Or use npm:

    npm install text-field-edit
    // This module is only offered as a ES Module
    import * as textFieldEdit 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

    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

    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

    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)

    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.

    Install

    npm i text-field-edit

    DownloadsWeekly Downloads

    906

    Version

    3.1.2022

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • fregante