Input alanına yazı yazıldığında butonun aktifleşmesi

classfiftyone · 15 Ocak 2022

Merhabalar, Online chat için yaptığım bir websitesi var. Lakin sorum şu, kullanıcı input alanına mesaj yazmadan butonun aktif hale gelmesini istemiyorum. Instagram'ın giriş sayfası gibi yani. Onun ki herhangi bir 3 karakter girmeden "Gönder" düğmesi çalışmıyor. Bende aynen onunkini istiyorum. Nasıl yapacağım?

The Anorak · 15 Ocak 2022

input'un input event'i üzerine bir function yazıp girilen metin uzunluğu eğer istenilen uzunluğun altında ise disabled = true, değilse de false yapmanız yeterli.

JavaScript:

const button = document.querySelector("#btn");
const input = document.querySelector("#txt");
input.addEventListener("input", (event) => {
  const typed = event.target.value;
  button.disabled = typed.length < 3;
});

classfiftyone · 15 Ocak 2022

The Anorak dedi:
input'un input event'i üzerine bir function yazıp girilen metin uzunluğu eğer istenilen uzunluğun altında ise disabled = true, değilse de false yapmanız yeterli.

JavaScript:

const button = document.querySelector("#btn"); const input = document.querySelector("#txt"); input.addEventListener("input", (event) => { const typed = event.target.value; button.disabled = typed.length < 3; });

Sonuç yine aynı, mesaj yazmadığım zaman bile bomboş halde gönderiyor. Üstelik buton hala aktif karakter yazmadığıma rağmen. Sanırım ben bir hata yaptım, ekran görüntüsü böyle. Yanlışım nerede?

The Anorak · 15 Ocak 2022

Buttonu başlangıçta "disabled" yapmanız gerekiyor. HTML tarafında içerisinde disabled yazarak veya Script içerisinde button.disabled = true; yaparsanız ilk açıldığı zamanda da pasif şekilde duracaktır.

<button disabled id="btn" vs. vs.></button>

Input alanına yazı yazıldığında butonun aktifleşmesi

Ayrıntılı düzenleme

classfiftyone

Hectopat

The Anorak

Terapat

classfiftyone

Hectopat

The Anorak

Terapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz