input.select / setSelectionRange / showPicker în JavaScript

input.select()
input.setSelectionRange(inceput, sfarsit)
input.showPicker()

Ce face input.select / setSelectionRange / showPicker

select() selectează tot textul din câmp, ca utilizatorul să-l poată copia sau înlocui ușor. setSelectionRange(inceput, sfarsit) selectează doar o parte; cu aceeași valoare pentru ambele mută cursorul în acea poziție.

showPicker() deschide fereastra obișnuită a câmpului: calendarul pentru type="date", paleta pentru type="color", alegerea fișierului. Merge doar în urma unei acțiuni a utilizatorului.

Parametri

Parametru	Descriere
inceput, sfarsit	Pentru setSelectionRange: pozițiile, ca la slice.

Ce returnează

undefined.

Exemple

Exemplul 1: Selectarea unui link de copiat

Câmpul conține adresa https://www.exemplu.ro/invitatie/42.

const link = document.querySelector("#link-invitatie");

link.addEventListener("focus", () => link.select());
link.focus();
console.log(link.selectionStart, link.selectionEnd, link.value.length);

link.setSelectionRange(8, 19);
console.log(link.value.slice(link.selectionStart, link.selectionEnd));

Rezultat în browser

0 35 35
www.exemplu

Exemplul 2: Calendarul deschis dintr-un buton

document.querySelector("#alege-data").addEventListener("click", () => {
  document.querySelector("input[type=date]").showPicker();
});

Greșeli frecvente

• Apelezi setSelectionRange pe un câmp type="email" sau number și primești InvalidStateError. Merge doar pe text, search, url, tel și password.

Comenzi înrudite

• HTMLElement.focus / blur: Mută focusul tastaturii pe un element (focus) sau îl scoate de pe el (blur).
• navigator.clipboard.writeText / readText: Copiază un text în clipboard sau îl citește de acolo (cu permisiunea utilizatorului).
• slice: Extrage o bucată dintr-un text sau dintr-un tablou, fără să modifice originalul.