Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

text-field-edit

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

text-field-edit

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

  • 3.1.2022
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
10K
increased by23.98%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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.

Keywords

FAQs

Package last updated on 07 Jan 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc