Főoldalra

jQuery focus() és a blur()


focus()        - Aktiválódik belépéskor, űrlapmező hangsúlyt kap.
                              Űrlapelemek területén aktiválódik, ha egérrel kattintottak vagy beléptek a Tab billentyűvel. 
							  
focusout()    - Aktiválódik űrlapmezőről történő kilépéskor.
                              Űrlapmező hangsúlyt kapott, majd kiléptek, és másik területen kattintottak.
							  
focusin()      - Kiválasztott elem területén lévő, minden űrlapelemnél, belépéskor aktiválódik.
                              Meghatározza űrlap mezőnél, hogy melyik szülő elemhez tartozik.
							  
blur()          - Kiválasztott területen, űrlapelem elhagyási eseménye.
                              Aktiválódik, ha egy adott űrlapelem területre kattintunk (belépünk), majd azt elhagyjuk és más területen kattintunk.
                              Valójában, fókuszálással együtt van értelme.

Focus()

Focus esemény bekövetkezik, ha űrlapmező hangsúlyt kap. (űrlapmezőn kattintunk, elhagyjuk.)
Aktiválódik minden űrlapelemnél: text, textarea mező, radio, reset, submit gomboknál.

$("#focus01").focus(function(){
  $("#span01").css("display", "inline").fadeOut(2000);
});

<p>
<input type="text" name="focus01" id="focus01" size="40"/>
<span id="span01">
Focus eseménynél, kiválasztott elemhez
csatolunk egy funkciót.
Kattints az <input> ablakába, és várj!
</span> </p>


 
$("#focusin01").focusin(function(){
    $(this).css("background-color", "#FFFFCC");
});

<div id="focusin01">
Adja meg a háttérszínét annak a szülő elemnek,
melynek valamelyik gyermek eleme, fókuszba került:
Kattints a "textarea" ablakba vagy "input" mezőbe!
<textarea name="textarea" cols="20" rows="3" id="textarea"> textarea ablak. </textarea>
<input type="text" name="cime" id="cime" value="input mező" size="40"/>






</div>
$("#focusout01").focusout(function(){
    $(this).css("background-color", "yellow");
});

<div id="focusout01">

Adja meg a háttérszínét annak a szülő elemnek,
melynek a gyermek eleme fókuszba került, majd elhagyták azt:

Kattints az "input" ablakba, majd azon kívül!

<input type="text" name="neve" id="neve" size="40"/>



</div>

 
$("#focusin02").focusin(function(){
      $(this).css("background-color", "orange");
});

<div id="focusin02">

Használhatjuk olyan elemeknél, melyek műveleti funkciót töltenek be.
(form; form elemek; button; horgony a)
Elsősorban, űrlapelemeknél van értelme. (form és form elemeknél.)



<a href="#.html"> Kattints ide! Ez egy hivatkozás. <a>

<p>Kattints ide! Ez egy p bekezdés. Nem történik semmi!</p>

</div>



jquery blur()

A blur() metódus, kiválasztott területen, űrlapelem elhagyási eseménye.
Aktiválódik, ha egy adott űrlapelem területre kattintunk (belépünk), majd azt elhagyjuk és más területen kattintunk. Valójában, fókuszálással együtt van értelme.

Űrlapelemekre történő fókuszálással együtt, van értelme.
Belépést focus() metódus figyeli, kilépést a blur() metódus figyeli.

Megjegyzés:
Űrlapelem eseményt, más területen történt eseménnyel is befolyásolhatjuk, vezérelhetjük.
A blur() módszer csak egy rövidítése az on("blur", kezelő) metódusnak, ezért az off("blur") metódussal eltávolíthatjuk, letílthatjuk.

A blur() metódus.

A blur() metódus.
$(document).ready(function(){
   $("#blur>input,#blur>textarea").blur(function(){
     alert("Kiléptél! Ez a mező, elvesztette a hangsúlyt(focust).");
     $(this).css("background-color", "yellow");
   });
	
});
</head>

<body>
<form id="blur">
<input type="text" value="Kattints ide, majd kívülre." size="50">
<input type="text" value="Kattints ide, majd kívülre." size="50">
<textarea cols="35" rows="3">Kattints ide, majd  kívülre.</textarea>
</form>
<p>Ez egy teszt p bekedés tartalma.</p>


inputmező:

inputmező:

textarea ablak:

Ez egy teszt p bekedés tartalma.

 A blur() és focus() metódus együtt.
$(document).ready(function(){
    $("#blur01>input").focus(function(){
       $(this).css("background-color", "#cccccc");
    });
    $("#blur01>input").blur(function(){
       $(this).css("background-color", "white");
    });
});
</head>

<body>
<form id="blur01">
<input type="text" value="Kattints ide, majd e területen kívülre." size="50">
<input type="text" value="Kattints ide, majd e területen kívülre." size="50">
<textarea cols="35" rows="3">Kattints ide, majd kívülre.</textarea>
</form>
<p>Ez egy teszt p bekedés tartalma.</p>


inputmező:

inputmező:

textarea ablak:

Ez egy teszt p bekedés tartalma.
A blur befolyásolása másik eseménnyel, külső elemről.
$(document).ready(function(){
     $("#celpont").blur(function() {
             alert( " Elem kezelőjét, a blur() metódust hívta meg." );
             $("#celpont").css("background-color", "pink");
        });

     // Most, kiváltó esemény a click programozottan alkalmazva, a blur() egy érv.
     $( "#masik" ).click( function () {
            $( "#celpont" ).blur();
        });
});
</head>

<body>
<input id="celpont" type="text" value="inputmező, ez a célpont" size="50"><br />
<p id="masik"> Másik eseménykezelő. Ez egy másik elem, melyre kattintva, kiválthatunk blur eseményt,a kiválasztott elemre. 
Frissítés után, kattints valahol e szöveges területen is. 
</p>

Teszteléshez:
1. Kattintsunk az inputmezőre, majd azon kívülre.
2. Frissítsük a weboldalt.
3. Most, a p elem szöveges területén kattintsunk.




<p> Másik eseménykezelő.
Ez egy másik elem, melyre kattintva, kiválthatunk blur eseményt, a kiválasztott elemre.
Frissítés után, kattints valahol e szöveges területen is.
</p>




Egy teszt űrlap.

$(document).ready(function(){
  var nevemezo=urlap.neve; 
  var cimemezo=urlap.lakcim;
    $("#urlap>input").focus(function(){ $(this).css("background-color", "#cccccc");} );
	
    $("#nev").blur(function(){
			if (nevemezo.value != "") { $(this).css("background-color", "white"); }
			else{ alert("Hiba!\n"+ nevemezo.name +" ablakban nincs adat!");}
    });
	
    $("#lakcim").blur(function(){
			if (cimemezo.value != "") { $(this).css("background-color", "white"); }
			else{ alert("Hiba!\n "+ cimemezo.name +" ablakban nincs adat!"); }
    });
	
	// A submit, mely területhez tartozik,  form elem id=urlap egyedi azonosítója alpján hivatkozunk.
    $("#urlap").submit(function(event){
			if(nevemezo.value != "" && cimemezo.value != ""){
			event.preventDefault();    // Mivel ez egy teszt űrlap, ezért az űrlap továbbítását, itt is letiltjuk.
			alert("Űrlap kitöltése rendben.\nAdatok továbbíthatók!");
			}
			else{
			event.preventDefault();    // Űrlap továbbításának letiltása.
			alert("Hiba!\n Űrlap kitöltése hiányos.\n Elküldés megakadályozva!");
			}
    });
});

</head>
<body>

	<form name="urlap" id="urlap">
		
		<input type="text" name="neve" id="nev" size="20"> <br /><br />
		<input type="text" name="lakcim" id="lakcim" size="20"> <br /><br />
		<input type="submit" name="kuldes" id="kuldes" value="Submit"> 
		<input type="reset" value="Adatok törlése">
		
	</form>


Teszt űrlap, mely jelenleg a teszt végett, nem továbbit adatokat.
Tesztelésnél adathalászattól fél valaki, akkor inputmezökbe írjon fals, azaz, nem valós adatot.


Neve:

Címe:







jQery focusout() és blur() módszer bemutató.

<script>
var focus=0; blur=0;
 
$("p").focusout(function() {
    focus++;
     $("#focus-count").text("focusout esemény: " + focus + "x");
  });
$("p").blur(function() {
    blur++;
     $("#blur-count").text("blur esemény: " + blur + "x");
  });
</script>

<style>
.inputok{float:left; margin-right:1em;} 
.inputok p{margin-top:0;}
</style>

</head>
<body>

<div class="inputok">
<p> 
<input type="text"> <br>
<input type="text">
</p>
<p> 
<input type="password">
</p>
</div> 

<div id="focus-count"> focusout kilép. </div> 
<div id="blur-count"> blur kilép. </div>


Kattintsunk az input mezökbe, "focus" aktív, "blur" nem.

 
Text mező: 
Text mező:  

Number mező:
focusout kilép.
blur kilép. 
<script>
 var focus=0; blur=0;
 
    $("p").focusout(function() {
      focus++;
       $("#focus-szamlalo").text("fokuszból kilépett: " + focus + "x");
    });
    $("p>input").blur(function() {
      blur++;
       $("#blur-szamlalo").html("blur kiléptél: " + blur + "x");
    });
</script>

<style>
#inputok{float:left; margin-right:1em;} 
#inputok p{margin-top:0;}
</style>

</head>
<body> 

<div id="inputok">
<p> 
<input type="text" /> <br />
<input type="text" />
</p>
<p>
<input type="password" />
</p>
</div>
 
<div id="focus-szamlalo"> focusout kilép. </div> 
<div id="blur-szamlalo"> blur kilép </div>


Kattintsunk az input mezökbe, "focus" és "blur" is, aktív.

Text mező:
Text mező:

Number mező:

focusout kilép.
blur kilép







Megjegyzés:
A focusout-nak elegendő azon szülő jelölőelem meghatározása, melyben az inputok találhatók. Például: $("p")
A blur-nak meg kell határozni szülő jelölőelemet, és azon gyermek elemet, melyre az esemény vonatkozik. Például: $("p>input")

A blur( ) módszerrel ellentétben, a focusout( ) metódus is előidézheti, ha minden gyermek elem, elveszíti a fókuszt.