Come ottenere e impostare il valore di testo input in JavaScript

Nella maggior parte delle pagine Web, è necessario ottenere il valore di testo di input dagli utenti per inserire i dati corretti e garantire la sicurezza dei dati. Ad esempio, è necessario ottenere, impostare o archiviare alcuni dati specifici per utilizzarli per ulteriori elaborazioni. In tali casi, ottenere e impostare il valore di testo di input in JavaScript diventa molto utile per proteggere la privacy dei dati.

Questo articolo dimostrerà i metodi per ottenere e impostare i valori di testo di input in JavaScript.

Come ottenere e impostare il valore di testo input in JavaScript?

Per ottenere e impostare il valore di testo di input in JavaScript, utilizzare:

• "getElementById ()" metodo
• "getElementByClassName ()" metodo
• "QuerySelector ()" metodo

Passare attraverso ciascuno dei metodi menzionati uno per uno!

Metodo 1: ottenere e impostare il valore di testo input in JavaScript utilizzando il documento.metodo getElementById ()

IL "getElementById ()"Il metodo accede a un elemento con l'ID specificato. Questo metodo può essere applicato per accedere agli ID dei campi di input e dei pulsanti per ottenere e impostare il valore di testo.

Sintassi

documento.getElementByID (elementID)

Qui, "Elementid"Si riferisce all'ID specificato di un elemento.

L'esempio seguente spiega il concetto discusso.

Esempio
In primo luogo, includi due campi di tipo di input e pulsanti separati per ottenere e impostare i valori di testo di input con "al clic"Eventi che accederanno alle funzioni specificate:

Ottieni valore
Valore impostato

Quindi, ottieni il valore del campo di input con l'aiuto del documento.Metodo getElementById ():

documento.getElementById ('GetText').value = "input qui";

Ora, dichiara una funzione chiamata "getandSetxt ()". Qui, prendi il campo di input con "gettext"ID e passare il valore di input al campo di input successivo con"SetText" id:

funzione getandSetxt ()
var setText = documento.getElementById ('GetText').valore;
documento.getElementById ('setText').value = setText;

Allo stesso modo, definisci una funzione chiamata "getText ()". Dopodiché, prendi il campo di input con "gettext"ID e passare il valore particolare alla casella di avviso per ottenere il valore di testo di input:

funzione getText ()
var gettext = document.getElementById ('GetText').valore;
avviso (gettext);

Produzione

Metodo 2: ottenere e impostare il valore di testo input in JavaScript utilizzando il documento.metodo getElementByClassName ()

IL "getElementByClassName ()"Il metodo accede a un elemento con l'aiuto del nome della classe specificato. Questo metodo, allo stesso modo, può essere applicato per accedere alla classe del campo di input e dei pulsanti per l'immissione e l'impostazione del valore di testo.

Sintassi

documento.getElementsByClassName (ClassName)

Nella sintassi sopra, il "nome della classe"Rappresenta il nome di classe degli elementi.

Esempio
Simile all'esempio precedente, accederemo innanzitutto al primo campo di input con "gettext" nome della classe. Quindi, definisci una funzione chiamata "getandSetxt ()"E ottieni il campo di input specificato in base al nome della classe e imposta il valore nel campo di input successivo:

documento.getElementByClassName ('GetText').value = "input qui";
funzione getandSext ()

var setText = documento.getElementByClassName ('GetText').valore;
documento.getElementById ('setText').value = setText;

Allo stesso modo, definisci una funzione chiamata "getText ()", Aggiungi il nome della classe del primo campo di input e passa il valore particolare alla casella di avviso per visualizzare il valore recuperato:

funzione getText ()
var gettext = document.getElementByClassName ('GetText').valore;
avviso (gettext);

Questa implementazione produrrà il seguente output:

Metodo 3: ottieni e imposta il valore di testo input in JavaScript utilizzando "Documento.Metodo QuerySelector () "

IL "documento.QuerySelector ()"Prendi il primo elemento che corrisponde al selettore specificato e il metodo AddeventListener () può aggiungere un gestore di eventi all'elemento selezionato. Questi metodi possono essere applicati per ottenere l'ID del campo di input e dei pulsanti e applicare un gestore di eventi ad essi.

Sintassi

documento.QuerySelector (selettori CSS)

Qui, "Selettori CSS"Fare riferimento a uno o più selettori CSS.

Guarda il seguente esempio.

Esempio
In primo luogo, includi i tipi di input con i loro valori di segnaposto e pulsanti per ottenere e impostare i valori di testo di input:

OTTENERE

IMPOSTATO

Quindi, prendi i campi di input e i pulsanti aggiunti usando "documento.QuerySelector ()" metodo:

LET buttonget = document.QuerySelector ('#GET');
Let ButtonSet = Document.QuerySelector ('#set');
Sia getInput = documento.QuerySelector ('#input-get');
let setInput = documento.QuerySelector ('#input-set');
Sia risultato = documento.QuerySelector ('#risultato');

Quindi, includi un gestore di eventi chiamato "clic"Per entrambi i pulsanti per ottenere e impostare i valori, rispettivamente:

Buttonget.addEventListener ('Click', () =>
risultato.InnerText = getInput.valore;
);
bottoni.addEventListener ('Click', () =>
getInput.value = setInput.valore;
);

Produzione

Abbiamo discusso dei metodi più semplici per ottenere e impostare il valore del testo di input in JavaScript.

Conclusione

Per ottenere e impostare il valore di testo di input in JavaScript, utilizzare il “documento.getElementById ()"Metodo o il

"documento.getElementByClassName ()"Metodo per accedere al campo di input e ai pulsanti specificati in base ai loro ID o nome della classe e quindi impostare i loro valori. Inoltre, il "documento.QuerySelector ()"Può anche essere utilizzato per ottenere e impostare i valori di testo di input in JavaScript. Questo blog ha spiegato i metodi per ottenere e impostare i valori di testo di input in JavaScript.