Come assegnare un valore alla casella di testo usando JavaScript

Come Assegnare Un Valore Alla Casella Di Testo Usando Javascript



A volte, potrebbe essere necessario impostare un valore di casella di testo in base a qualsiasi evento. Puoi farlo aggiungendo un elemento casella di testo di input nel file HTML e impostando il suo valore di attributo in base al requisito. JavaScript ha metodi predefiniti che possono essere utili per lo scopo indicato.

Questo post definirà la procedura per assegnare un valore alla casella di testo usando JavaScript.

Come assegnare un valore alla casella di testo utilizzando JavaScript?

Per assegnare un valore alla casella di testo, utilizzare i seguenti metodi:







Diamo un'occhiata al funzionamento di questi metodi separatamente!



Metodo 1: assegnare valore alla casella di testo utilizzando il metodo setAttribute()

Il ' setAttributo() Il metodo ” viene utilizzato per assegnare un valore alla casella di testo. Viene utilizzato per aggiungere o impostare un attributo a un determinato elemento e dargli un valore. Questo metodo accetta due parametri come argomento ed entrambi sono obbligatori.



Sintassi





Segui la sintassi indicata di seguito per il metodo setAttribute():

setAttributo ( nomeattributo, valoreattributo ) ;

Qui, ' attributoValore ” è il valore dell'attributo il cui nome è specificato.



Esempio

Creeremo prima un'intestazione e un campo di input con il valore predefinito ' Testo ” valore segnaposto. Quindi, aggiungi un pulsante che invocherà il metodo 'myFunction()' quando viene cliccato:

< h5 > Fare clic sul pulsante per vedere il predefinito valore del campo di testo. h5 >

< tipo di ingresso = 'testo' id = 'il mio testo' segnaposto = 'Testo' >

< pulsante con un clic = 'miaFunzione()' > Clic pulsante >

Nel file JS, definisci una funzione denominata ' miaFunzione() ” e accedi alla casella di testo utilizzando “ getElementbyId() ” e quindi impostare il valore con l'aiuto di “ setAttributo() ' metodo:

funzione miaFunzione ( ) {

documento. getElementById ( 'il mio testo' ) . setAttributo ( 'valore' , 'Suggerimento Linux' ) ;

}

Si può vedere dall'output che quando si fa clic sul pulsante, il valore della casella di testo è impostato come ' LinuxSuggerimento ”:

Vediamo la prossima procedura per assegnare valore alla casella di testo.

Metodo 2: assegnare un valore alla casella di testo utilizzando la proprietà del valore del testo

C'è un altro approccio per assegnare un valore alla casella di testo, che è ' valore ” proprietà del testo. In questo approccio, devi solo assegnare il valore alla casella di testo utilizzando la proprietà value.

Sintassi

Utilizzare la seguente sintassi per assegnare un valore a una casella di testo utilizzando la proprietà value dell'elemento di testo:

valore = 'Testo' ;

Esempio

Qui assegneremo il valore alla casella di testo già creata nell'esempio precedente. Per fare ciò, accedi alla casella di testo in myFunction() e quindi assegna il valore richiesto alla casella di testo utilizzando ' valore ' proprietà:

funzione miaFunzione ( ) {

documento. getElementById ( 'il mio testo' ) . valore = 'Suggerimento Linux' ;

}

Come puoi vedere l'output correttamente, assegna il valore alla casella di testo:

Abbiamo raccolto gli approcci più semplici per assegnare valore alla casella di testo utilizzando JavaScript.

Conclusione

Per assegnare un valore alla casella di testo utilizzando JavaScript, è possibile utilizzare il metodo predefinito JavaScript chiamato metodo setAttribute() o la proprietà value dell'elemento di testo. Entrambi questi approcci funzionano in modo efficiente per assegnare valore alla casella di testo. Puoi selezionarne uno secondo le tue esigenze. In questo post, abbiamo discusso gli approcci per assegnare il valore alla casella di testo utilizzando JavaScript con esempi dettagliati.