Input değerini okuma
value özelliği ile input değerini okumayı ve boş girişleri kontrol etmeyi öğrenirsin.
value özelliği
Bir giriş alanının yazdığı metni okumak için value özelliğini kullanırsın. Bu özellik alanın o anki değerini dize olarak verir.
const name = document.querySelector('input');
console.log(name.value);Boş bir alanın value'su boş dizedir (''). Sayı türü beklesen bile tarayıcı her zaman dize döndürür; sayıya çevirmeyi sonraki derslerde göreceğiz.
Boş giriş denetimi
Kullanıcının yalnızca boşluk tuşuna basıp basmadığını yakalamak için trim metodunu kullanırsın. trim, değerin başındaki ve sonundaki boşlukları temizler.
const name = input.value.trim();
if (name === '') {
console.log('Boş giriş');
}Böylece yalnızca boşluktan oluşan bir giriş de boş sayılır. Doğrulama işlemlerinde bu denetim neredeyse her zaman yapılır.
Uygulama Değeri oku, temizle ve denetle
input değişkeni bir giriş alanını gösteriyor. Değerini oku, trim ile temizle ve boşsa konsola 'Boş giriş', değilse değeri yazdır.
Örnek çözümü göster
const value = input.value.trim();
if (value === '') {
console.log('Boş giriş');
} else {
console.log(value);
}Kendini test et
-
value'yu trim ile temizle
const input = document.querySelector('input'); const value = input.value.____(); if (value === '') { console.log('Boş'); }Cevabı göster
const input = document.querySelector('input'); const value = input.value.trim(); if (value === '') { console.log('Boş'); } -
Özellikleri anlamlarıyla eşleştir
- input.value
- Alanın yazdığı metin
- value.trim()
- Boşlukları temizler
- value === ''
- Boş giriş denetimi
-
Hangisi input değerini doğru okur?
const input = document.querySelector('input'); // A const a = input.text; // B const b = input.content; // C const c = input.value; // D const d = input.data;- A
- B
- C
- D
Cevabı göster
C — Doğru! input.value alanın o anki metnini verir.