Inne działy

 

JavaScript zdarzenie onFocus

Zdarzenie onFocus zachodzi gdy kontrolka otrzyma fokus czyli gdy dane z klawiatury będą trafiać właśnie do niej czyli gdy obiekt staje się aktywny. Zdarzenie te jest związane z obsługą elementów formularza takich jak select, text, textarea oraz obiektu window.

Można oczekiwać, że zaznaczenie tekstu w elemencie text lub textarea mogłoby wywołać zdarzenie onFocus ponieważ zaznaczając tekst musimy kliknąć w wybrany element czyniąc go aktywnym wniosek jest logiczny, ale takie myślenie jest niepoprawne. JavaScript traktuje zaznaczanie tekstu w polu jako szczególny przypadek, zamiast wywołania zdarzenia onFocus JavaScript wywołuje metodę obsługi zdarzenia onSelect.

 Zastanów się co się stanie, jeśli kod, który jest wywoływany przez zdarzenie onFocus zawiera kod, który odwołuje się do okna dialogowego? Cóż po tym jak element otrzymuje fokus, zostanie wyświetlone okno dialogowe. Następnie użytkownik klika na przycisk OK lub Anuluj fokus powraca do elementu i okno dialogowe zostanie ponownie wyświetlone. Można powiedzieć, że w tym wypadu wystąpi nieskończona pętla. Proszę, nie próbujcie tego w domu!

Wskazówka: zdarzenie onfocus jest przeciwieństwem zdarzenia onBlur.

Składnia:

 

onFocus = "kod obsługi zdarzenia"

Przykład:

Możesz używać zdarzenia onFocus razem z elementami frame, select, text, textarea i z obiektem window. Poniżej znajdują się przykłady zastosowania zdarzenia onFocus.

 

<html>
<head>

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

	<form>
	
		Produkt: <select name="wybierzProdukt" size=1 onFocus="alert(this.value)">
		<option value="motor"> motor
		<option value="samochód"> samochód
		<option value="rower"> rower
		</select>
		
		Nazwisko: <input type="text" value="" name="nazwisko" size=25 onFocus="alert(this.value)">
				
	</form>	
	
</body>
</html>

 Obsługa skryptu zdarzenia onfocuspoprzez JavaScript i DOM:

 

<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onfocus przez JavaScript</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function przechwycZdarzenie(){
                
                var pole1 = document.getElementById('pole1');
                var pole2 = document.getElementById('pole2');
                pole1.onfocus = fokus;
                pole2.onfocus = fokus;
                
                function fokus(){
                    document.getElementById('status').innerHTML = "Fokus znajduję się w " + this.id;
                }
            }
            window.onload = przechwycZdarzenie;            
        </script>
    </head>
    <body>
        <input id="pole1">
        <input id="pole2">
        <span id="status"></span>
    </body>
</html>

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


<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onfocus przez HTML</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function fokus(element){
                document.getElementById('status').innerHTML = 
                        "Fokus znajduję się w " + element.id;
            }
                        
        </script>
    </head>
    <body>
        <input onfocus="fokus(this);" id="pole1">
        <input onfocus="fokus(this);" id="pole2">
        <span id="status"></span>
    </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.