Come inserire testo in textarea dove c'è il cursore

Aggiungere del testo in corrispondenza della posizione del cursore in una textarea o input

Come usare JavaScript per inserire testo in textarea e input corrispondentemente alla posizione del cursore

Facile funzione JavaScript per aggiungere testo in corrispondenza della posizione del cursore in una textarea o input

Struttura HTML

Vorresti creare una semplice funzione che aggiunga del testo in un'area di testo alla posizione del cursore e non sai come fare? Poche semplici righe di codice saranno sufficienti!

Prima di tutto dai un'occhiata a questo codice HTML:

Come vedi ho inserito solamente due elementi; un <button> e una <textarea> (funziona allo stesso modo anche con gli elementi <input>. La textarea ha un id come riferimento all'elemento. Il button ha un listener all'evento onclick che richiama la funzione qui sotto:

Funzione JavaScript

    
const addToTextArea = function (text_to_add) {
    let textarea = document.getElementById("my-textarea");
    let start_position = textarea.selectionStart;
    let end_position = textarea.selectionEnd;

    textarea.value = `${textarea.value.substring(0, start_position)}${text_to_add}${textarea.value.substring(end_position, textarea.value.length)}`;
}

La funzione addToTextArea() riceve in input una stringa con il testo da inserire e successivamente esegue i seguenti step: - ottiene l'elemento textarea cercando per id - ottiene la posizione iniziale della "selezione" - ottiene la posizione finale della "selezione" - modifica il valore della textarea ricopiando tutto ciò che è scritto prima dell'inizio della selezione, dopo la fine della selezione e tra le due inserisce il testo passato in input

Ma cosa si intende per "selezione"? Se hai solo posizionato il cursore nella textarea, la start_position === end_position ma se tu avessi selezionato del testo (es: una parola) lo start_position corrisponderebbe all'inizio della selezione mentre l'end_position alla fine della selezione.

Con questa funzione puoi quindi sia aggiungere del testo in corrispondenza della posizione del cursore, sia sovrascrivere il testo selezionato.

Se vuoi testare questo codice usa il box qui sotto:

See the Pen How to insert text into the textarea at the current cursor position by Fantantonio (@Fantantonio) on CodePen.

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 20/10/2022

Categories: devtips

Tags: html javascript textarea selection cursor