Reaaliaikaisten projektien, kuten uutiskirjeiden, yhteydenottolomakkeiden, kassalomakkeiden ja käyttäjien kirjautumisten luomiseen, sähköposti ”-kenttä on pakollinen. Käyttäjän on syötettävä sähköpostiosoitteensa jatkaakseen tai aloittaakseen prosessin sekä kirjautuakseen sisään tililleen. Tätä tarkoitusta varten käyttäjän on annettava sähköpostiin kirjautuminen tai rekisteröityminen joka kerta, mikä tekee siitä huonon käyttökokemuksen. Tämä ongelma on ratkaistu JavaScript HTML DOM -automaattisen täydennysominaisuuden avulla.
Tämä blogi selittää prosessin, jolla käsitellään JavaScriptin HTML DOM -sähköpostin automaattisen täydennyksen ominaisuutta.
Kuinka käsitellä HTML DOM -syötesähköpostin automaattisen täydennyksen ominaisuutta?
HTML DOM -syötteen automaattisen täydennyksen ominaisuus ' sähköposti ' -elementti tarjoaa luettelon, joka sisältää viimeisimmät tiedot, jotka on aiemmin lisätty ' sähköposti ”-kenttään. Sen avulla käyttäjä voi valita sähköpostinsa luettelosta, jos se on saatavilla automaattisesti.
Syntaksi
DOM-syöttösähköpostin automaattisen täydennysominaisuuden syntaksi on ilmoitettu alla:
emailObj. automaattinen täydennys = 'päällä|pois'
Yllä oleva syntaksi asettaa ja poistaa automaattisen täydennyksen ominaisuuden emailObj-elementin yli.
emailObj. automaattinen täydennys
Tämä syntaksi hakee ' automaattinen täydennys ”-ominaisuutta selvittääksesi, onko tämä ominaisuus käytössä vai ei.
Otetaan käyttöön JavaScript-ohjelma automaattisen täydennyksen omaisuudelle
Esimerkki: Automaattisen täydennyksen ominaisuuden ottaminen käyttöön, poistaminen käytöstä ja arvon palauttaminen
Tässä esimerkissä automaattisen täydennyksen ominaisuus poistetaan käytöstä, ja se otetaan käyttöön asettamalla tämän ominaisuuden arvoksi ' päällä ' ja ' vinossa ' vastaavasti. Sitten noudetaan automaattisen täydennyksen ominaisuuden nykyinen arvo:
< kehon >< keskusta >
< h1 tyyli = 'väri: kadetinsininen;' > Linux < / h1 >
Sähköposti: < syöttö tyyppi = 'sähköposti' id = 'demoEmail' >
< br >
< br >
< -painiketta klikkaamalla = 'Disabler()' > Pois käytöstä < / -painiketta >
< -painiketta klikkaamalla = 'Enabler()' > Aktivointi < / -painiketta >
< h3 id = 'kohde' > < / h3 >
< -painiketta klikkaamalla = 'Checker()' > Tarkisti < / -painiketta >
< / keskusta >
< käsikirjoitus >
function Disabler() {
document.getElementById('demoEmail').autocomplete = 'off';
}
function Enabler() {
document.getElementById('demoEmail').autocomplete = 'päällä';
}
function Checker() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / käsikirjoitus >
< / kehon >
Yllä olevan koodilohkon selitys on esitetty alla:
- Ensinnäkin ' syöttö ' elementti luodaan attribuutilla ' sähköposti ” hyväksyä ja suorittaa perusvahvistuksen varmistaaksesi, että syötetyt tiedot ovat sähköpostia.
- Seuraavaksi luodaan kolme painikeelementtiä, jotka kutsuvat ' Disabler()), 'Enabler()' ja 'Checker() ”toiminnot.
- Määritä nyt ' Pois käytöstä ()'-toiminto valitsemalla ' syöttö '-elementti käyttää sen tunnusta ja määrittää 'arvon' vinossa ' sen ' automaattinen täydennys ” omaisuutta.
- ' Aktivointi ()'-funktio, käytä samaa ' automaattinen täydennys '-ominaisuutta, mutta anna sille nyt arvo ' päällä ”.
- Määritä sen jälkeen ' Tarkistaja ()' -toiminto lisäämällä vain ' automaattinen täydennys ' syöteelementin viitteen viereen ja tallenna se muuttujaan ' j ”.
- Näytä lopuksi tämän muuttujan arvo ' j ' verkkosivulla käyttämällä ' innerHTML ” omaisuutta.
Tulos yllä olevan kokoamisen jälkeen näkyy seuraavasti:
Tulos osoittaa, että syötetyn sähköpostin automaattisen täydennyksen ominaisuus poistetaan käytöstä ja otetaan käyttöön. Sen arvo myös haetaan ja näytetään verkkosivulla.
Johtopäätös
HTML DOM -syöte sähköpostin automaattinen täydennys -ominaisuus luo automaattisesti luettelon, joka sisältää arvot, jotka käyttäjä on aiemmin syöttänyt sähköpostikenttään. Näin käyttäjä voi helposti valita aiemmin syöttämänsä tiedot ja parantaa siten käyttökokemusta. Tämä ominaisuus asetetaan, kun ' päällä ' on määritetty sille ja pois käytöstä, kun arvo ' vinossa ' on läpäisty. Tämä blogi on selittänyt DOM-syötteen sähköpostin automaattisen täydennyksen ominaisuuden JavaScriptin avulla.