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;

Cevabı göster

C — Doğru! input.value alanın o anki metnini verir.

Sıradaki ders: Form submit olayı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler