Lietotāja ievades uztveršana un apstrāde ar JavaScript prompt() metodi

 

Šajā rakstā jūs uzzināsiet, kā uztvert lietotāja ievadi un apstrādāt to. Jūs tiksiet iepazīstināts ar vienkāršu piemēru, kas parāda, kā manipulēt ar informāciju, kas tiek parādīta, pamatojoties uz lietotāja ievadi.

Lai uztvertu lietotāja ievadi, varat izmantot iebūvēto prompt() metodi, piemēram:

let atbilde = prompt('Kā Tevi sauc?');

Kad atbildes mainīgajā ir lietotāja nodrošināta ievade, varat ar to manipulēt jebkurā veidā.

Piemēram, jūs varat izvadīt ievadīto informāciju ekrānā kā <h1> HTML elementu.

Lūk, kā to var izdarīt:

let atbilde = prompt('Kā Tevi sauc?');
if (typeof(atbilde) === 'string') {
    var h1 = document.createElement('h1')
    h1.innerText = atbilde;
    document.body.innerText = '';
    document.body.appendChild(h1);
}

Tas, iespējams, ir ātrākais un vienkāršākais veids, kā tvert lietotāja ievadi vietnē, taču šāda rīcība nav visefektīvākā pieeja, jo īpaši sarežģītākos scenārijos.

Šeit parādās HTML veidlapas.

Varat kodēt skriptu, kas ņems ievadi no HTML veidlapas un parādīs lietotāja ievadīto tekstu ekrānā.

Lūk, kā tas tiek darīts.

Sāksim, iekodējot attiecīgā uzdevuma “pārbaudes risinājumu”.

var h1 = document.createElement('h1')
h1.innerText = "Ievadiet ievadi, lai mainītu šo tekstu"


var input = document.createElement('ievade')
input.setAttribute('ievadīt', 'tekstu')


document.body.innerText = '';
document.body.appendChild(h1);
document.body.appendChild(input);

Tātad jūs būtībā darāt to pašu, ko darījāt iepriekš, tikai šoreiz jūs dinamiski pievienojat arī ievades elementu un iestatāt tā HTML tipa atribūtu uz tekstu. Tādā veidā, kad sākat rakstīt tajā, burti tiks parādīti iepriekš esošajā h1 elementā.

Šajā brīdī iepriekš minētais kods, kas tiek palaists tiešsaistes vietnē, pievienos elementu h1 ar tekstu “Ievadiet ievadi, lai mainītu šo tekstu” un zem tā tukšu ievades formas lauku.

Varat izmēģināt šo kodu pats, piemēram, norādot pārlūkprogrammā vietni example.com un konsolē palaižot iepriekš minēto kodu.

Atcerieties, ka varat piekļūt konsolei, izmantojot izstrādātāja rīkus savā pārlūkprogrammā.

Vēl viena lieta, ko jūs darījāt iepriekš minētajā kodā, ir: manu mainīgo iestatīšana, izmantojot atslēgvārdu var.

Lai gan labāk ir izmantot vai nu let vai const, jūs vienkārši veicat ātru eksperimentu tiešsaistes vietnē un vēlaties izmantot visvieglāko mainīgo atslēgvārdu, kas nesūdzēsies par to, ka esat jau iestatījis h1 vai ievadi.

Ja jums būtu pilnīgs projekts ar modernu JavaScript rīku iestatīšanu, jūs izmantotu let vai const, taču šī ir tikai ātra demonstrācija, tāpēc var izmantot var šajā gadījumā.

Nākamā lieta, kas jums jādara, ir iestatīt notikumu klausītāju (event listener). Notikums, kuru klausāties, ir pārmaiņu notikums. Šādā gadījumā izmaiņu notikums tiks aktivizēts pēc tam, kad būsiet ierakstījis ievadi un nospiedis taustiņu ENTER.

Šeit ir jūsu atjauninātais kods:

var h1 = document.createElement('h1')
h1.innerText = "Ievadi tekstu, lai to izmainītu"


var input = document.createElement('ievade')
input.setAttribute('ievadīt', 'tekstu')


document.body.innerText = '';
document.body.appendChild(h1);
document.body.appendChild(input);


input.addEventListener('izmaiņas', function() {
    console.log(input.value)
})

Šoreiz, kad palaižat iepriekš minēto kodu minētajā example.com vietnē, pēc tam ievades laukā ierakstot tekstu un nospiežot taustiņu Enter, jūs saņemsit konsolē reģistrētā ievadītā teksta vērtību.

Tagad vienīgais, kas jums joprojām ir jādara, lai pabeigtu manu kodu, ir atjaunināt h1 elementa teksta saturu ar vērtību, ko ieguvāt no ievades lauka.

Šeit ir pilns, atjaunināts kods:
var h1 = document.createElement('h1')
h1.innerText = "Ievadi tekstu, lai to izmainītu"


var input = document.createElement('ievade')
input.setAttribute('ievadīt', 'tekstu')


document.body.innerText = '';
document.body.appendChild(h1);
document.body.appendChild(input);


input.addEventListener('izmaiņas', function() {
    h1.innerText = input.value
})
Pēc šī atjaunināšanas neatkarīgi no tā, ko ierakstāt ievadē, pēc taustiņa ENTER nospiešanas, tas tiks parādīts kā teksts elementā h1.
Lai gan tas pabeidz šo nodarbības vienumu, ir svarīgi atzīmēt, ka DOM manipulāciju un notikumu apstrādes apvienošana ļauj izveidot dažas patiesi ievērojamas interaktīvas vietnes.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: