Javascript ile input kontrolü

furkandemirci Mayıs 17, 2020

1 695 Bir dakikadan az

Jquery ile input kontrolü nasıl yapılır iki örnek ile anlatacağım.

İlk örneğimizde iki input’tan biri dolu ise diğeri otomatik kapalı olacak. Bu işlemde readonly kullanımını göreceğiz

input-kontrol

Aşağıdaki kodlar ‘html + js + css’ birlikte verilmiştir. Kodları kopyalayıp “.html” olarak kaydederek canlı çalıştırabilirsiniz.

<html>
<head>
    <title>İnput duruma göre disable etme (readonly kullanımı)</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.readonly { 
background-color:#d0d0d0;
}
</style>
</head>
<body>
<p><b>HANGİ İNPUT DOLUYSA DİĞERİ KAPANACAKTIR</b></p><br>
<label for="">T.C. NO: </label>
<input type="text" class="birinci" value=""  placeholder="Giriniz">
<label for="">YAB. KİMLİK NO: </label>
<input type="text" class="ikinci" value=""   placeholder="Giriniz">
<br><br>
<script type="text/javascript">
$(".birinci").change(function() {
var obj=$(this);
if(obj.val() !=="") {
$(".ikinci").attr("readonly","true").addClass("readonly");
$(".birinci").removeAttr("readonly").removeClass("readonly");
}
else{  
$(".ikinci").removeAttr("readonly").removeClass("readonly");
}
});
$(".ikinci").change(function() {
var obj=$(this);
if(obj.val() !=="") {
$(".birinci").attr("readonly","true").addClass("readonly");
$(".ikinci").removeAttr("readonly").removeClass("readonly");
}
else{  
$(".birinci").removeAttr("readonly").removeClass("readonly");
}
});
</script>
</body>
</html>

Diğer örneğimiz ise input’un length özelliğine göre işlem yapabilme olacak.

input-length-kullanimi

Yukarıdaki fotoğraftaki örneğin kaynak kodları html + js aşağıda birlikte verilmiştir.Kodları “.html” olarak kaydederek canlı deneyebilirsiniz.

<html>
<head>
    <title>İnput Length Kontrolü</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
</style>
</head>
<body>
<p><b>İNPUT 11 HANE KONTROLÜ</b></p><br>
<label for="">T.C NO</label>
<input type="text" class="birinci" value=""  placeholder="Giriniz">
<button id="giris">BAS</button>
<br><br>
<script type="text/javascript">

$("#giris").on("click", function() {
   if ($(".birinci").val().length <= 10) { 
   alert("11 Hane'den Az olamaz");
   }
   else if($(".birinci").val().length == 11) {
   alert("11 Hane");
   }
   else if($(".birinci").val().length > 11) {
   alert("11 Hane'den Fazla olamaz");
   }
});

</script>

</body>
</html>

Etiketler