Inne działy

 

JavaScript zdarzenie onBlur

 

Zdarzenie onBlur jest związane z obsługą zdarzeń związanych z formularzem, takich elementów jak select, text, textarea i obiektu window. Zdarzenie onBlur jest wywoływane gdy element przestaje być aktywnym. Innymi słowami zdarzenie onBlur zachodzi gdy użytkownik kliknie na jednym elemencie formularza, a następnie klika na inny element.

Zdarzenie onBlur na obiektach select, text i textarea stanowi doskonałą okazję dla każdego pola do przeprowadzenia walidacji wprowadzonych danych czyli sprawdzenia poprawności wprowadzonych danych. Gdy użytkownik zakończył wprowadzanie danych do pola tekstowego czy dokonał wyboru w obiektach typy select, checkbox czy radio można wywołać funkcję do sprawdzenia poprawności danych w polu. W tym momencie można zasygnalizować użytkownikowi błąd i powrócić do źle wypełnionego obiektu.

 

Wskazówka: Zdarzenie onblur jest przeciwieństwem zdarzenia onfocus.

 

Składnia:

 

onBlur = "kod obsługi zdarzeń"

Przykład:

 

<html>
<head>

</head>
<body bgcolor="lightgrey" onBlur="document.bgColor='black'" onFocus="document.bgColor='white'">

        <form>
	
		Produkt: <select name="wybierzProdukt" size=1 onBlur="alert(this.value)">
		<option value="t-shirt"> t-shirt
		<option value="długopis"> długopis
		<option value="torba"> torba
		</select>
		
		Nazwisko: <input type="text" value="" name="lastName" size=25 onBlur="alert(this.value)">
				
	</form>	
	
</body>
</html>

Obsługa skryptu zdarzenia onblurpoprzez JavaScript i DOM:

 

<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onblur przez JavaScript</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function przechwycZdarzenie(){
                var pole1 = document.getElementById('pole1');
                var pole2 = document.getElementById('pole2');
                pole1.onblur = opuszczam;
                pole2.onblur = opuszczam;
                
                function opuszczam(){
                    alert(this.id + " właśnie tracę focus.");
                }
            }
            window.onload = przechwycZdarzenie;
        </script>
    </head>
    <body>
        <input id="pole1">
        <input id="pole2">
    </body>
</html> 

Obsługa zdarzenia onblur bezpośrednio przez element HTML:

 

<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onblur przez HTML</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function opuszczam(element){
                alert(element.id + " właśnie tracę focus.");
            }
            
        </script>
    </head>
    <body>
        <input onblur="opuszczam(this);" id="pole1">
        <input onblur="opuszczam(this);" id="pole2">
    </body>
</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.