Metin Kutusuna Odaklan Veya Odaklanma Durumundan Çık - Javascript
Butona bastığımızda imleç metin kutusunda aktif hale gelecek ve yine başka bir butona bastığımızda imleç pasif hale gelerek odaklanma durumundan çıkaracak. Alternatif bir örneği görelim.
Ekran Görüntüsü
Dosyalar
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Javascript - Metin Kutusuna Odaklan Veya Odaktan Çık</title>
</head>
<body>
<input type="text" id="metin-kutusu">
<input type="button" id="odaklan" value="Odaklan" />
<input type="button" id="cik" value="Çık" />
<script type="text/javascript" src="dosya.js"></script>
</body>
</html>
dosya.js
//--------------------------------------------------
//function Grubu
//--------------------------------------------------
function metinKutusuOdaklan() {
document.getElementById("metin-kutusu").focus();
}
function metinKutusuOdaklanmaDurumundanCik() {
document.getElementById("metin-kutusu").blur();
}
//--------------------------------------------------
//addEventListener Grubu
//--------------------------------------------------
document.getElementById("odaklan").addEventListener(
'click',
metinKutusuOdaklan
);
document.getElementById("cik").addEventListener(
'click',
metinKutusuOdaklanmaDurumundanCik
);
dosya.js (Açıklamalı)
//--------------------------------------------------
//Metin kutusuna odaklanma işlemini
//yaptırmak için fonsiyon yazdık.
//--------------------------------------------------
function metinKutusuOdaklan() {
document.getElementById("metin-kutusu").focus();
}
//--------------------------------------------------
//Metin kutusunaki odaklanma işlemini
//kaldırmak için fonsiyon yazdık.
//--------------------------------------------------
function metinKutusuOdaklanmaDurumundanCik() {
document.getElementById("metin-kutusu").blur();
}
//--------------------------------------------------
//HTML dosyasında iki farklı id'li buton vardı:
//odaklan ve cik. odaklan butonunda metin kutusuna
//focus işlemini click olayı için yaptırıyoruz.
//--------------------------------------------------
document.getElementById("odaklan").addEventListener(
'click',
metinKutusuOdaklan
);
//--------------------------------------------------
//HTML dosyasında iki farklı id'li buton vardı:
//odaklan ve cik. cik butonunda focus işlemini
//iptal ediyoruz ya da focus halinden çıkıyoruz.
//--------------------------------------------------
document.getElementById("cik").addEventListener(
'click',
metinKutusuOdaklanmaDurumundanCik
);
İndirme Bağlantısı
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir
Yararlanılan Kaynaklar
Etiketler
javascript açıklamalı içerik