Το onfocus είναι το Γεγονός κατά το οποίο ο χρήστης εστιάζει με το ποντίκι του επάνω σε ένα στοιχείο μιας Φόρμας. Είναι δηλαδή το ακριβώς αντίθετο με το onblur. Το onfocus λειτουργεί μόνο σε στοιχεία Φόρμας.
Μάθετε περισσότερα για τις Φόρμες
Μάθετε περισσότερα για τις Φόρμες
Παράδειγμα 1
Παρακάτω έχουμε δύο πεδία κειμένου μέσα σε μια Φόρμα τα οποία περιέχουν το Γεγονός onfocus. Αν εστιάσετε με το ποντίκι σας σε ένα από αυτά τα πεδία τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onfocus'.
Δείτε τον κώδικα:
Όπως βλέπετε κάθε ένα από τα δύο πεδία κειμένου της φόρμας περιέχουν το onfocus="disp_alert()". Αυτό σημαίνει πως κάθε φορά που εκτελείται το γεγονός onfocus επάνω στα στοιχεία αυτά της Φόρμας τότε θα εκτελεστεί η λειτουργία disp_alert() η υλοποίηση της οποίας βρίσκεται στο τμήμα head της σελίδας, μέσα στις ετικέτες <script> και </script>. Η λειτουργία disp_alert περιέχει μόνο μια μέθοδο JavaScript, την μέθοδο alert η οποία εμφανίζει το κείμενο μέσα στα εισαγωγικά μέσα σε ένα Windows box.
Δείτε τον κώδικα:
Το γεγονός onfocus
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onfocus")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onfocus="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onfocus="disp_alert()">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onfocus")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onfocus="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onfocus="disp_alert()">
</form>
</body>
</html>