Per la creazione di progetti in tempo reale come iscrizioni a newsletter, moduli di contatto, moduli di pagamento e accessi utente, il ' e-mail ' il campo è obbligatiorio. L'utente deve inserire la sua email per continuare o avviare il processo e anche per accedere al proprio account. A questo scopo, l'utente deve fornire ogni volta un accesso alla posta o registrarsi, il che rende l'esperienza utente negativa. Questo problema viene risolto con l'aiuto della proprietà di completamento automatico JavaScript HTML DOM.
Questo blog spiega la procedura per gestire la proprietà di completamento automatico dell'e-mail di input HTML DOM di JavaScript.
Come gestire la proprietà di completamento automatico dell'e-mail di input HTML DOM?
La proprietà di completamento automatico dell'input HTML DOM “ e-mail ”, fornisce un elenco contenente i dati più recenti precedentemente inseriti nell'elemento “ e-mail ' campo. Consente a un utente di scegliere la propria email dall'elenco se è disponibile automaticamente.
Sintassi
La sintassi per la proprietà di completamento automatico dell'e-mail di input DOM è indicata di seguito:
emailOgg. completamento automatico = 'acceso|spento'
La sintassi precedente imposta e rimuove la proprietà di completamento automatico sull'elemento emailObj.
emailOgg. completamento automatico
Questa sintassi recupera il valore di ' completamento automatico ' per scoprire se questa proprietà è abilitata o meno.
Disponiamo di un programma JavaScript per il completamento automatico della proprietà
Esempio: abilitazione, disabilitazione e recupero del valore della proprietà di completamento automatico
In questo esempio, la proprietà di completamento automatico verrà disabilitata, abilitata impostando questa proprietà su ' SU ' E ' spento 'rispettivamente. Quindi, verrà recuperato il valore corrente della proprietà di completamento automatico:
< corpo >< centro >
< h1 stile = 'colore: blu cadetto;' > Linux < / h1 >
E-mail: < ingresso tipo = 'e-mail' id = 'Email demo' >
< fratello >
< fratello >
< pulsante al clic = 'Disabilitatore()' > Disabilitatore < / pulsante >
< pulsante al clic = 'Abilitatore()' > Abilitatore < / pulsante >
< h3 id = 'bersaglio' > < / h3 >
< pulsante al clic = 'Controllatore()' > Controllore < / pulsante >
< / centro >
< sceneggiatura >
funzione Disabilita() {
document.getElementById('demoEmail').autocomplete = 'off';
}
funzione Abilitatore() {
document.getElementById('demoEmail').autocomplete = 'on';
}
funzione Controllo() {
var j = document.getElementById('demoEmail').completamento automatico;
document.getElementById('target').innerHTML = j;
}
< / sceneggiatura >
< / corpo >
La spiegazione del blocco di codice sopra è riportata di seguito:
- Prima il ' ingresso 'L'elemento viene creato con un tipo di attributo ' e-mail ' per accettare ed eseguire una convalida di base per assicurarsi che i dati immessi siano e-mail.
- Successivamente, vengono creati tre elementi pulsante che chiamano ' Disabler()”, “Enabler()” e “Checker() 'funzioni.
- Ora, definire il ' Disabilitatore ()” selezionando la funzione “ ingresso ' elemento utilizzando il suo ID e assegnando il valore di ' spento ' per il suo ' completamento automatico ' proprietà.
- Nel ' Abilitatore ()” funzione, applicare la stessa “ completamento automatico ' ma ora assegnagli il valore ' SU ”.
- Successivamente, definire il ' Controllore ()” funzione aggiungendo solo “ completamento automatico ' accanto al riferimento dell'elemento di input e memorizzarlo nella variabile ' J ”.
- Alla fine, visualizza il valore di questa variabile “ J ' sulla pagina web utilizzando il comando ' innerHTML ' proprietà.
L'output dopo la compilazione di quanto sopra viene mostrato come:
L'output mostra che la proprietà di completamento automatico dell'e-mail di input viene disabilitata e abilitata. Il suo valore viene anche recuperato e visualizzato sulla pagina web.
Conclusione
La proprietà di completamento automatico dell'e-mail di input HTML DOM crea automaticamente un elenco che contiene i valori che l'utente ha precedentemente immesso nel campo e-mail. In questo modo, l'utente può facilmente scegliere tra i dati inseriti in precedenza e, quindi, migliorare l'esperienza dell'utente. Questa proprietà viene impostata quando il valore di ' SU ' gli viene assegnato e disabilitato quando il valore di ' spento ' è passato. Questo blog ha spiegato la proprietà di completamento automatico dell'e-mail di input DOM tramite JavaScript.