Questo articolo dimostrerà i metodi per ottenere e impostare valori di testo di input in JavaScript.
Come ottenere e impostare il valore del testo di input in JavaScript?
Per ottenere e impostare il valore del testo di input in JavaScript, utilizzare:
- “ getElementById() ' metodo
- “ getElementByClassName() ' metodo
- “ querySelector() ' metodo
Passa attraverso ciascuno dei metodi menzionati uno per uno!
Metodo 1: ottenere e impostare il valore del testo di input in JavaScript utilizzando il metodo document.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 ai pulsanti per ottenere e impostare il valore del testo.
Sintassi
documento. getElementById ( elementi )
Qui, ' elementi ” si riferisce all'ID specificato di un elemento.
L'esempio seguente spiega il concetto discusso.
Esempio
Innanzitutto, includi due campi del tipo di input e pulsanti separati per ottenere e impostare i valori del testo di input con ' al clic ” eventi che accederanno alle funzioni specificate:
< pulsante con un clic = 'getText()' > Ottieni valore pulsante >
< pulsante con un clic = 'getAndSetText()' > Valore impostato pulsante >
< tipo di ingresso = 'testo' id = 'setText' nome = 'setText' al clic = 'this.value = '' ' />
Quindi, ottieni il valore del campo di input con l'aiuto del metodo document.getElementById():
documento. getElementById ( 'getText' ) . valore = 'Inserisci qui' ;Ora, dichiara una funzione denominata ' getAndSetText() ”. Qui, prendi il campo di input con il ' getText ” id e passare il valore di input al campo di input successivo avente “ setText ' id:
funzione getAndSetText ( ) {era setText = documento. getElementById ( 'getText' ) . valore ;
documento. getElementById ( 'setText' ) . valore = setText ;
}
Allo stesso modo, definisci una funzione denominata ' getText() ”. Successivamente, ottieni il campo di input con ' getText ” id e passare il valore particolare alla casella di avviso per ottenere il valore del testo di input:
funzione getText ( ) {era getText = documento. getElementById ( 'getText' ) . valore ;
mettere in guardia ( getText ) ;
}
Produzione
Metodo 2: ottenere e impostare il valore del testo di input in JavaScript utilizzando il metodo document.getElementByClassName()
Il ' getElementByClassName() Il metodo ” accede a un elemento con l'aiuto del nome della classe specificato. Questo metodo, analogamente, può essere applicato per accedere alla classe del campo di input e ai pulsanti per l'immissione e l'impostazione del valore del testo.
Sintassi
documento. getElementsByClassName ( nome della classe )Nella sintassi sopra, il ' nome della classe ” rappresenta il nome della classe degli elementi.
Esempio
Simile all'esempio precedente, accederemo prima al primo campo di input con il ' getText ' nome della classe. Quindi, definisci una funzione denominata ' getAndSetText() ' e ottieni il campo di input specificato in base al nome della sua classe e imposta il valore nel campo di input successivo:
funzione getAndSetText ( )
{
era setText = documento. getElementByClassName ( 'getText' ) . valore ;
documento. getElementById ( 'setText' ) . valore = setText ;
}
Allo stesso modo, definisci una funzione denominata ' 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 ( ) {era getText = documento. getElementByClassName ( 'getText' ) . valore ;
mettere in guardia ( getText ) ;
}
Questa implementazione produrrà il seguente output:
Metodo 3: ottenere e impostare il valore del testo di input in Javascript utilizzando il metodo 'document.querySelector()'.
Il ' document.querySelector() ” recupera il primo e andato giù 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 loro un gestore di eventi.
Sintassi
documento. querySelector ( Selettori CSS )Qui, ' Selettori CSS ” fare riferimento a uno o più selettori CSS.
Guarda il seguente esempio.
Esempio
Innanzitutto, includi i tipi di input con i relativi valori segnaposto e i pulsanti per ottenere e impostare i valori del testo di input:
< ID pulsante = 'ottenere' > OTTENERE pulsante >
< tipo di ingresso = 'testo' id = 'set di input' segnaposto = 'Valore impostato' >
< ID pulsante = 'impostare' > IMPOSTARE pulsante >
Quindi, recupera i campi e i pulsanti di input aggiunti utilizzando ' document.querySelector() ' metodo:
Let buttonGet = documento. querySelector ( '#ottenere' ) ;lascia pulsante Imposta = documento. querySelector ( '#impostare' ) ;
lascia getInput = documento. querySelector ( '#input-get' ) ;
lascia impostareInput = documento. querySelector ( '#input-set' ) ;
lascia risultato = documento. querySelector ( '#risultato' ) ;
Quindi, includi un gestore di eventi denominato ' clic ” per entrambi i pulsanti per ottenere e impostare i valori, rispettivamente:
pulsante Ottieni. addEventListener ( 'clic' , ( ) => {risultato. testo interno = getInput. valore ;
} ) ;
pulsante Imposta. addEventListener ( 'clic' , ( ) => {
getInput. valore = setInput. valore ;
} ) ;
Produzione
Abbiamo discusso i metodi più semplici per ottenere e impostare il valore del testo di input in JavaScript.
Conclusione
Per ottenere e impostare il valore del testo di input in JavaScript, utilizzare ' document.getElementById() ” o il
“ document.getElementByClassName() ” per accedere al campo di input e ai pulsanti specificati in base ai loro ID o al nome della classe e quindi impostarne i valori. Inoltre, il “ document.querySelector() ” può essere utilizzato anche per ottenere e impostare valori di testo di input in JavaScript. Questo blog ha spiegato i metodi per ottenere e impostare valori di testo di input in JavaScript.