Durante la creazione di un modulo o di un questionario, è necessario richiedere l'utente ad un certo punto mentre riempie un campo di input. Ad esempio, limitando il numero di caratteri all'interno di un campo I.e. "Contatto n". Oltre a ciò, per applicare una condizione prerequisito per riempire un campo particolare, ecc. In tali scenari di casi, abilitare/disabilitare i campi di input in JavaScript è un approccio molto conveniente sia per lo sviluppatore che per la fine dell'utente.
Questo tutorial spiegherà gli approcci per abilitare/disabilitare i campi di input usando JavaScript.
Come abilitare/disabilitare i campi di input usando JavaScript?
Per abilitare/disabilitare i campi di input usando JavaScript, i seguenti approcci possono essere utilizzati in combinazione con "Disabilitato" proprietà:
Approccio 1: Abilita/Disabilita i campi di input utilizzando JavaScript utilizzando l'evento OnClick
UN "al clic"L'evento viene utilizzato per reindirizzare alla funzione specificata. Questo evento può essere applicato per invocare la funzione corrispondente per abilitare e disabilitare i campi di input al clic del pulsante.
Esempio
Diamo un'occhiata all'esempio di seguito:
Abilita/Disabilita il campo di testo
Nel codice sopra indicato, eseguire i seguenti passaggi:
Continuiamo alla parte JavaScript del codice:
Nel frammento di codice sopra, eseguire i seguenti passaggi:
Produzione
Nell'output sopra, si può osservare che il campo di input è disabilitato e abilitato correttamente al tasso del pulsante corrispondente.
Approccio 2: Abilita/Disabilita i campi di input utilizzando JavaScript utilizzando il metodo AddeventListener ()
IL "addEventListener ()"Il metodo viene utilizzato per allegare un evento all'elemento. Questo metodo può essere implementato per disabilitare e abilitare un campo di input in base all'evento allegato e specificato "chiave".
Sintassi
elemento.addEventListener (evento, funzione, uso)Nella sintassi sopra:
Esempio
Osserviamo l'esempio di seguito:
Abilita/Disabilita il campo di testo
Nelle righe di codice sopra:
Passiamo alla parte JavaScript del codice:
Nel frammento di codice sopra, eseguire i seguenti passaggi:
Produzione
Dall'output sopra, è evidente che il campo di input diventa disabilitato dopo aver premuto il "accedere" chiave.
Conclusione
IL "Disabilitato"Proprietà in combinazione con il"al clicEvento "o il"addEventListener ()"Il metodo può essere applicato per abilitare/disabilitare i campi di input utilizzando JavaScript. Il primo approccio può essere utilizzato per reindirizzare alla funzione corrispondente per abilitare/disabilitare il campo di input al clic del pulsante. Quest'ultimo approccio può essere implementato per eseguire la funzionalità richiesta in base all'evento allegato e al specificato "chiave". Questo articolo spiega come abilitare/disabilitare i campi di input in JavaScript.