Para sa paglikha ng mga real-time na proyekto tulad ng mga pag-signup sa newsletter, contact form, checkout form, at user login, ang ' email ” field ay kinakailangan. Kailangang ipasok ng user ang kanyang email upang ipagpatuloy o simulan ang proseso at upang mag-login din sa kanyang account. Para sa layuning ito, ang user ay kailangang magbigay ng mail login o magparehistro sa bawat oras, na ginagawa itong isang masamang karanasan ng user. Naresolba ang isyung ito sa tulong ng JavaScript HTML DOM autocomplete property.
Ipinapaliwanag ng blog na ito ang pamamaraan upang mahawakan ang HTML DOM input email autocomplete property ng JavaScript.
Paano Pangasiwaan ang HTML DOM Input Email Autocomplete Property?
Ang autocomplete property ng HTML DOM input “ email ” element, ay nagbibigay ng isang listahan na naglalaman ng pinakahuling data na dati nang ipinasok sa “ email ” patlang. Pinapayagan nito ang isang user na pumili ng kanyang email mula sa listahan kung ito ay awtomatikong magagamit.
Syntax
Ang syntax para sa DOM input email autocomplete property ay nakasaad sa ibaba:
emailObj. autocomplete = 'on|off'
Ang syntax sa itaas ay nagtatakda at nag-aalis ng autocomplete na property sa elemento ng emailObj.
emailObj. autocomplete
Kinukuha ng syntax na ito ang halaga ng ' autocomplete ” property para malaman kung naka-enable ang property na ito o hindi.
Magkaroon tayo ng JavaScript program para sa autocomplete property
Halimbawa: Pag-enable, Pag-disable, at Pagkuha ng Halaga ng Autocomplete Property
Sa halimbawang ito, idi-disable ang autocomplete property, na pinagana sa pamamagitan ng pagtatakda ng property na ito sa ' sa 'at' off ” ayon sa pagkakabanggit. Pagkatapos, ang kasalukuyang halaga ng autocomplete property ay kukunin:
< katawan >< gitna >
< h1 istilo = 'kulay: cadetblue;' > Linux < / h1 >
E-mail: < input uri = 'email' id = 'demoEmail' >
< br >
< br >
< pindutan onclick = 'Disabler()' > Disabler < / pindutan >
< pindutan onclick = 'Enabler()' > Enabler < / pindutan >
< h3 id = 'target' > < / h3 >
< pindutan onclick = 'Checker()' > Checker < / pindutan >
< / gitna >
< script >
function Disabler() {
document.getElementById('demoEmail').autocomplete = 'off';
}
function Enabler() {
document.getElementById('demoEmail').autocomplete = 'on';
}
function Checker() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / script >
< / katawan >
Ang paliwanag ng bloke ng code sa itaas ay nakasaad sa ibaba:
- Una, ang ' input 'Ang elemento ay nilikha na may isang uri ng katangian ' email ” upang tanggapin at isagawa ang pangunahing pagpapatunay upang matiyak na ang inilagay na data ay email.
- Susunod, tatlong elemento ng pindutan ang nilikha na tinatawag na ' Disabler()”, “Enabler()”, at “Checker() ” mga function.
- Ngayon, tukuyin ang ' Disabler ()' function sa pamamagitan ng pagpili sa ' input 'elemento gamit ang id nito at nagtatalaga ng halaga ng ' off 'para sa' autocomplete ” ari-arian.
- Nasa ' Enabler ()' function, ilapat ang parehong ' autocomplete ” property ngunit ngayon ay italaga ito ng halaga ng “ sa ”.
- Pagkatapos nito, tukuyin ang ' Checker ()' function sa pamamagitan ng pagdaragdag lamang ng ' autocomplete 'sa tabi ng reference ng input element at iimbak ito sa variable' j ”.
- Sa huli, ipakita ang halaga ng variable na ito ' j ” sa webpage gamit ang “ innerHTML ” ari-arian.
Ang output pagkatapos ng compilation ng nasa itaas ay ipinapakita bilang:
Ang output ay nagpapakita na ang input email autocomplete property ay hindi pinagana at pinapagana. Ang halaga nito ay kinukuha din at ipinapakita sa webpage.
Konklusyon
Ang HTML DOM input email autocomplete property, ay awtomatikong gumagawa ng isang listahan na naglalaman ng mga value na dati nang ipinasok ng user sa field ng email. Kaya't, ang user ay madaling makapili mula sa kanilang naunang ipinasok na data at samakatuwid, pinahuhusay ang karanasan ng user. Ang property na ito ay itinakda kapag ang halaga ng “ sa ' ay itinalaga dito at hindi pinagana kapag ang halaga ng ' off ' ay tapos na. Ipinaliwanag ng blog na ito ang DOM input email autocomplete property sa pamamagitan ng JavaScript.