Το onblur είναι το Γεγονός της απομάκρυνσης της εστίας από ένα στοιχείο μιας Φόρμας. Δηλαδή αν ο χρήστης επιλέξει ένα στοιχείο μιας Φόρμας και έπειτα πατήσει με το ποντίκι του οπουδήποτε στην σελίδα έξω από το στοιχείο αυτό ή πατήσει το κουμπί Tab, τότε έχουμε ένα Γεγονός onblur. Το onblur λειτουργεί μόνο σε στοιχεία Φόρμας.
Μάθετε περισσότερα για τις Φόρμες
Μάθετε περισσότερα για τις Φόρμες
Παράδειγμα 1
Έχουμε δύο πεδία κειμένου μέσα σε μια Φόρμα τα οποία περιέχουν το Γεγονός onblur. Αν πατήσετε με το ποντίκι σας σε ένα από αυτά τα πεδία και έπειτα πατήσετε οπουδήποτε αλλού στην σελίδα τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onblur'.
Όπως βλέπετε κάθε ένα από τα δύο πεδία κειμένου της φόρμας περιέχουν το onblur="disp_alert()". Αυτό σημαίνει πως κάθε φορά που εκτελείται το γεγονός onblur επάνω στα στοιχεία αυτά τότε θα εκτελεστεί η λειτουργία disp_alert() η υλοποίηση της οποίας βρίσκεται στο τμήμα head της σελίδας, μέσα στις ετικέτες <script> και </script>. Η λειτουργία disp_alert περιέχει μόνο μια μέθοδο JavaScript, την μέθοδο alert η οποία εμφανίζει το κείμενο μέσα στα εισαγωγικά μέσα σε ένα Windows box.
Το onblur γεγονός σε πεδίο κειμένου
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onblur")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onblur="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onblur="disp_alert()">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onblur")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onblur="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onblur="disp_alert()">
</form>
</body>
</html>
Παράδειγμα 2
Στο παράδειγμα αυτό θα υποθέσουμε ότι έχουμε μια Φόρμα εγγραφής μελλών σε σχολή σκοποβολής. Για να γραφτεί κάποιος εκεί αρκεί να δώσει το ονοματεπώνυμο του και την ηλικία του. Η σχολή έχει τον εσωτερικό κανονισμό σύμφωνα με τον οποίο δέχεται μέλη ηλικίας άνω των 18 ετών. Η παρακάτω Φόρμα εγγραφής λοιπόν έχει 3 πεδία κειμένου: ένα για το όνομα, ένα για το επώνυμο και ένα για την ηλικία. Το πεδίο για την ηλικία περιέχει το γεγονός onblur ώστε όταν η γραμματέας της σχολής συμπληρώσει την ηλικία και πατήσει το κουμπί υποβολής των στοιχείων της Φόρμας (άρα θα έχουμε απομάκρυνση της εστίας από το πεδίο αυτό), θα εκτελεστεί μια λειτουργία Javascript η οποία θα ελέγχει αν η ηλικία είναι μικρότερη του 18. Στην περίπτωση που είναι μικρότερη του 18 τότε θα εμφανίζει το μήνυμα: 'Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18.
Στο πεδίο κειμένου για την ηλικία έχουμε προσθέσει το onblur="check_age()". Η JavaScript λειτουργία check_age() ελέγχει την τιμή της ηλικίας και εμφανίζει μήνυμα αν η ηλικία είναι μικρότερη του 18.
Αν παρατηρήσετε η ετικέτα <form> περιέχει το onsubmit="return check_form()". Το onsubmit αποτελεί και αυτό ένα γεγονός της HTML, όπως το onblur, κατά το οποίο συμβαίνει η αποστολή δεδομένων μιας Φόρμας, είτε πατώντας το submit button, είτε πατώντας το κουμπί enter σε οποιοδήποτε από τα πεδία της Φόρμας. Όταν στην Φόρμα αυτή συμβαίνει η αποστολή των δεδομένων της, πριν σταλούν τα δεδομένα εκτελείται η JavaScript λειτουργία check_form() η οποία επιστρέφει (return) true αν η ηλικία είναι μεγαλύτερη του 18 και false αν είναι μικρότερη του 18. Αν η τιμή που θα επιστρέψει η JavaScript λειτουργία check_form() είναι true τότε θα σταλούν τα δεδομένα της Φόρμας, αν επιστρέψει την τιμή false δεν θα σταλούν τα δεδομένα. Με αυτήν την λειτουργία κατασκευάσαμε την Φόρμα σύμφωνα με τις ανάγκες που εξυπηρετεί, δηλαδή όχι μόνο εμφανίζει μήνυμα σε περίπτωση λάθους ηλικίας ενός μέλους προς εγγραφή, αλλά επιπλέον απαγορεύει την καταχώρηση του
Το onblur γεγονός σε πεδίο κειμένου
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function check_age() {
if (registerForm.ilikia.value < 18) {
alert("Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18")
}
}
function check_form() {
if (registerForm.ilikia.value > 18)
return true
else
return false
}
//-->
</script>
<body>
<form action="doityourself/register_in_skopovoli.php" method="post" name="registerForm" onSubmit="return check_form()">
Όνομα: <input name="onoma" type="text" size="20" maxlength="20"> <br />
Επώνυμο: <input name="eponimo" type="text" size="20" maxlength="20"> <br />
Ηλικία: <input name="ilikia" type="text" size="2" maxlength="2" onblur="check_age()"> <br />
<input name="submit" type="submit" value="εγγραφή">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function check_age() {
if (registerForm.ilikia.value < 18) {
alert("Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18")
}
}
function check_form() {
if (registerForm.ilikia.value > 18)
return true
else
return false
}
//-->
</script>
<body>
<form action="doityourself/register_in_skopovoli.php" method="post" name="registerForm" onSubmit="return check_form()">
Όνομα: <input name="onoma" type="text" size="20" maxlength="20"> <br />
Επώνυμο: <input name="eponimo" type="text" size="20" maxlength="20"> <br />
Ηλικία: <input name="ilikia" type="text" size="2" maxlength="2" onblur="check_age()"> <br />
<input name="submit" type="submit" value="εγγραφή">
</form>
</body>
</html>
Αν παρατηρήσετε η ετικέτα <form> περιέχει το onsubmit="return check_form()". Το onsubmit αποτελεί και αυτό ένα γεγονός της HTML, όπως το onblur, κατά το οποίο συμβαίνει η αποστολή δεδομένων μιας Φόρμας, είτε πατώντας το submit button, είτε πατώντας το κουμπί enter σε οποιοδήποτε από τα πεδία της Φόρμας. Όταν στην Φόρμα αυτή συμβαίνει η αποστολή των δεδομένων της, πριν σταλούν τα δεδομένα εκτελείται η JavaScript λειτουργία check_form() η οποία επιστρέφει (return) true αν η ηλικία είναι μεγαλύτερη του 18 και false αν είναι μικρότερη του 18. Αν η τιμή που θα επιστρέψει η JavaScript λειτουργία check_form() είναι true τότε θα σταλούν τα δεδομένα της Φόρμας, αν επιστρέψει την τιμή false δεν θα σταλούν τα δεδομένα. Με αυτήν την λειτουργία κατασκευάσαμε την Φόρμα σύμφωνα με τις ανάγκες που εξυπηρετεί, δηλαδή όχι μόνο εμφανίζει μήνυμα σε περίπτωση λάθους ηλικίας ενός μέλους προς εγγραφή, αλλά επιπλέον απαγορεύει την καταχώρηση του