Abilita/Disabilita campi di input usando JavaScript

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à:

• "al clic"Evento.
• "addEventListener ()" metodo.

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:

• Includere un input "testo"Campo con il specificato"id" E "segnaposto" valori.
• Inoltre, crea due pulsanti separati con allegato "al clic"Eventi che reindirizzano a due diverse funzioni per abilitare e disabilitare rispettivamente i campi di input.

Continuiamo alla parte JavaScript del codice:

Nel frammento di codice sopra, eseguire i seguenti passaggi:

• Dichiarare una funzione denominata "DisableField ()".
• Nella sua definizione, accedi al campo di input creato dal suo "id" usando il "documento.getElementById ()" metodo
• Nel passaggio successivo, applica il "Disabilitato"Proprietà e assegnargli il valore booleano"VERO". Ciò comporterà la disabilitazione del campo di input sul clic del pulsante.
• Allo stesso modo, definisci una funzione chiamata "abilitafield ()".
• Nella sua definizione, allo stesso modo, ripeti il ​​passaggio discusso per accedere al campo di input.
• Qui, assegna il "Disabilitato"Proprietà come"falso". Ciò comporterà l'abilitazione del campo di input disabilitato.

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

Nella sintassi sopra:

• "evento"Si riferisce al nome dell'evento.
• "funzione"Indica la funzione da eseguire.
• "utilizzo"È il parametro opzionale.

Esempio

Osserviamo l'esempio di seguito:

Abilita/Disabilita il campo di testo

Nelle righe di codice sopra:

• Includere l'intestazione dichiarata.
• Nel passaggio successivo, ripetere il metodo discusso nell'approccio precedente per includere un campo di input che ha specificato "id" E "segnaposto" valori.

Passiamo alla parte JavaScript del codice:

Nel frammento di codice sopra, eseguire i seguenti passaggi:

• Accedere al campo di input per il suo "id" usando il "documento.getElementById ()" metodo.
• Nel passaggio successivo, applica il "addEventListener ()"Metodo e allegare un evento chiamato"keydown".
• Nell'ulteriore codice, assegna il "Disabilitato"Proprietà come"falso"Per abilitare il campo di input.
• Infine, nel "altro"Condizione, allocare il"Disabilitato"Proprietà come"VERO"Per disabilitare il campo di input abilitato dopo aver premuto il"accedere" chiave.

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.