Ο χειριστής OnChange καλείται όταν αλλάζει οποιοδήποτε πεδίο εισαγωγής ή γίνεται κλικ σε οποιοδήποτε κουμπί.

Το όρισμα Name περιέχει το όνομα του πεδίου ή του κουμπιού εισαγωγής με πεζά γράμματα.

Παράδειγμα: Διαδικασία OnChange(Όνομα: String); Αρχίζουν // Εάν τα πεδία τιμής ή ποσότητας αλλάξουν, υπολογίστε το ποσόΑν Όνομα = "τιμή" Ή Όνομα = "cnt" Τότε Summa:= RoundMul(Τιμή, Cnt, 2); // Αν αλλάξει το πεδίο ποσού, τότε υπολογίζουμε την τιμή.Αν Όνομα="summa" Τότε Τιμή:= Εάν(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); τέλος;

Ένα παρόμοιο αποτέλεσμα μπορεί να επιτευχθεί όταν χρησιμοποιείτε τους χειριστές OnPriceChange, OnCntChange, OnSummaChange.

Παράδειγμα: Διαδικασία OnPriceChange; Start Summa:= RoundMul(Τιμή, Cnt, 2); τέλος; On ProcedureCntChange; Start Summa:= RoundMul(Τιμή, Cnt, 2); τέλος; On ProcedureSummaChange; Τιμή έναρξης:= Εάν(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); τέλος;

Αυτός ο χειριστής είναι βολικός στη χρήση κατά την οργάνωση σπονδυλωτών, καθώς συλλέγει πληροφορίες για σχεδόν όλα τα συμβάντα. Για παράδειγμα:

BaseClass: Παραλλαγή; Στο ProcedureCreate; Start BaseDocument.Init(Self); // Δημιουργήστε μια βασική κλάση και ανταλλάξτε συνδέσμους μαζί της. Αρχικοποίηση εγγράφου.τέλος; On ProcedureChange (Όνομα: String); Start BaseClass.OnChange(Name); // Μεταβίβαση συμβάντων στη βασική κλάσητέλος;

Ή ένα παράδειγμα αρθρωτότητας χρησιμοποιώντας ένα singleton (ιδιότητα μονάδας στην καρτέλα Περιγραφή του προγράμματος επεξεργασίας):

Στο ProcedureCreate; Begin BaseClass.OnCreate(Self); // Αρχικοποίηση εγγράφου.τέλος; On ProcedureChange (Όνομα: String); Start BaseClass.OnChange(Self, Name); // Μεταβίβαση συμβάντων στη βασική κλάση.τέλος;

Ρυθμίζει το πρόγραμμα χειρισμού αλλαγών δεδομένο στοιχείομορφή ή ενεργοποιεί αυτό το συμβάν. Η μέθοδος έχει τρεις περιπτώσεις χρήσης:

χειριστής (eventObject) είναι η συνάρτηση που θα οριστεί ως χειριστής. Όταν καλείται, θα λάβει ένα αντικείμενο συμβάντος eventObject .

χειριστής(eventObject) - βλέπε παραπάνω.
eventData - πρόσθετα δεδομένα που διαβιβάζονται στον χειριστή. Πρέπει να αντιπροσωπεύονται από ένα αντικείμενο στη μορφή: (fName1:value1, fName2:value2, ...) .

Μπορείτε να αφαιρέσετε τον εγκατεστημένο χειριστή χρησιμοποιώντας τη μέθοδο unbind().

Και οι τρεις επιλογές για τη χρήση της μεθόδου είναι ανάλογες με άλλες μεθόδους (βλ. παραπάνω), επομένως όλες οι λεπτομέρειες χρήσης της αλλαγής() μπορούν να βρεθούν στην περιγραφή αυτών των μεθόδων.

Θυμηθείτε ότι το συμβάν αλλαγής δεν συμβαίνει απευθείας τη στιγμή της αλλαγής, αλλά μόνο όταν χαθεί η εστίαση του αλλαγμένου στοιχείου φόρμας.

Παράδειγμα

// ορίστε τον χειριστή συμβάντων αλλαγής για το στοιχείο με id foo $("#foo" ) .change (function () ( alert ("Το στοιχείο foo έχει αλλάξει." ) ; ) ); // καλέστε το συμβάν αλλαγής στο στοιχείο foo $("#foo" ) .change () ; // ρυθμίστε έναν άλλο χειριστή συμβάντων αλλαγής, αυτή τη φορά σε στοιχεία // με μπλοκ κλάσης. Μεταβίβαση πρόσθετων δεδομένων στο πρόγραμμα χειρισμού $(".block" ) .change (( a: 12 , b: "abc" ) , συνάρτηση (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; ειδοποίηση ("Το στοιχείο με την κλάση " + "εξωτερικό συμβάν ";"Data έχει μεταβιβαστεί σε εξωτερικό συμβάν: "D. ) ;

Εμφανίζεται αμέσως μετά την αλλαγή της τιμής του στοιχείου και το συμβάν onchange συμβαίνει όταν το στοιχείο χάνει την εστίαση. Μια άλλη διαφορά είναι ότι το συμβάν onchange υποστηρίζεται ευρύτερα από προγράμματα περιήγησης και λειτουργεί σε στοιχεία όπως το , και είναι πιο εκτεταμένο στο .

Υποστήριξη προγράμματος περιήγησης Χαρακτηριστικό συμβάντος
ΛΥΡΙΚΗ ΣΚΗΝΗ
IExplorer
άκρη

αλλαγή	Ναί	Ναί	Ναί	Ναί	Ναί	Ναί

Παράδειγμα χρήσης σύνταξης

Ένα παράδειγμα εμφάνισης του κειμένου που πληκτρολογήθηκε σε ένα στοιχείο όταν άλλαξε η εστίαση, χρησιμοποιώντας το χαρακτηριστικό συμβάντος onchange. Σημειώστε ότι αν είχαμε χρησιμοποιήσει το χαρακτηριστικό συμβάντος oninput, το κείμενο θα εμφανιζόταν αμέσως αντί όταν άλλαξε η εστίαση.

εκδήλωση onchange

Πληκτρολογήστε λίγο κείμενο και αφαιρέστε την εστίαση από το στοιχείο:

συνάρτηση testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "Πληκτρολογήσατε το ακόλουθο κείμενο: " + x; )

Πληκτρολογήστε λίγο κείμενο και αφαιρέστε την εστίαση από το στοιχείο:

Ένα παράδειγμα εμφάνισης της τιμής της ετικέτας τιμής (αντικείμενο της αναπτυσσόμενης λίστας) χρησιμοποιώντας το χαρακτηριστικό συμβάντος onchange.

εκδήλωση onchange

Επιλέξτε μια επιθυμία από τη λίστα:

Ευχή 1 Ευχή 2 Ευχή 3

συνάρτηση wishFunction() ( var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "Έχετε επιλέξει: " + z; )

Επιλέξτε μια επιθυμία από τη λίστα:

Ευχή 1 Ευχή 2 Ευχή 3

Εξετάστε ένα παράδειγμα αλλαγής της 2D περιστροφής ενός στοιχείου χρησιμοποιώντας Ιδιότητα CSSμεταμορφώνω , Χαρακτηριστικό HTMLσυμβάντα onchange και λειτουργίες JavaScript:

Δισδιάστατη περιστροφή ενός στοιχείου στο CSS #test (πλάτος : 100 εικονοστοιχεία ; /* ορίστε το πλάτος του πλαισίου */ ύψος : 100 εικονοστοιχεία ; /* ορίστε το ύψος του πλαισίου */ περιθώριο : 20 εικονοστοιχεία ; /* ορίστε την ποσότητα πλήρωσης για όλες τις πλευρές του στοιχείου */ περιθώριο: 1 εικονοστοιχείο στερεό πορτοκαλί χρώματος ή 1 px σταθερό πορτοκαλί ; /* ορίστε το ύψος του πλαισίου */ περιθώριο : 20 εικονοστοιχεία ορίστε το χρώμα φόντου */ transform : rotate(0deg) ; /* ορίστε ότι δεν υπάρχει περιστροφή 2D */ -webkit-transform : rotate(0deg) ; -ms-transform : rotate(0deg) ; /* για να υποστηρίξετε πρώιμες εκδόσεις προγραμμάτων περιήγησης */ ) συνάρτηση rotate(value) στη λειτουργία rotate(value) (αλλαγή της τιμής του στοιχείου με αλλαγή του αποτελέσματος) με id = αποτέλεσμα και υποστήριξη πρώιμων εκδόσεων του προγράμματος περιήγησης */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ;document.getElementById("test" ).style.msTransform = "rotate(" + value + "get early deg)Md" testy ransform = "rotate(" + value + "deg)" ; /* υποστήριξη για πρώιμες εκδόσεις του προγράμματος περιήγησης */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = value + "deg" ; )

Μετακινήστε το ρυθμιστικό για να περιστρέψετε το στοιχείο:

transform: rotate(0deg); Rotate me _element"> στοιχείο HTML Επιλέξτε μια γεύση παγωτού: Επιλέξτε ένα… Σοκολάτα Σαρδέλα Βανίλια

Κύριο μέρος ( οθόνη: πλέγμα, πλέγμα-πρότυπο-περιοχές: "επιλογή αποτελέσματος"; ) επιλογή (περιοχή πλέγματος: επιλογή; ) . αποτέλεσμα (περιοχή πλέγματος: αποτέλεσμα; )

JavaScript const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `Σας αρέσει το $(event.target.value)`; )); Αποτέλεσμα Στοιχείο εισαγωγής κειμένου

Για ορισμένα στοιχεία, συμπεριλαμβανομένου του , το συμβάν αλλαγής δεν ενεργοποιείται έως ότου το στοιχείο ελέγχου χάσει την εστίαση. Δοκιμάστε να εισαγάγετε κάτι στο παρακάτω πεδίο και, στη συνέχεια, κάντε κλικ κάπου αλλού για να ενεργοποιήσετε το συμβάν.

HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); συνάρτηση updateValue(e) ( log.textContent = e.target.value; ) Προδιαγραφές αποτελεσμάτων Κατάσταση προδιαγραφών

HTML Living Standard Ο ορισμός της "αλλαγής" σε αυτήν την προδιαγραφή.	Βιωτικο επιπεδο

Συμβατότητα προγράμματος περιήγησης

Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

Επιτραπέζιο κινητό Chrome Edge Firefox Internet Explorer Opera Safari Android Προβολή ιστού Chrome για Android Firefox για Android Opera για Android Safari σε iOS Samsung Internetαλλαγή

Πλήρης υποστήριξη Chrome Ναι	Πλήρης υποστήριξη Edge 12	Πλήρης υποστήριξη Firefox Ναι	IE Πλήρης υποστήριξη Ναι	Opera Πλήρης υποστήριξη Ναι	Safari Πλήρης υποστήριξη Ναι	WebView Android Πλήρης υποστήριξη Ναι	Chrome Android Πλήρης υποστήριξη Ναι	Firefox Android Πλήρης υποστήριξη Ναι	Opera Android Πλήρης υποστήριξη Ναι	Safari iOS Πλήρης υποστήριξη Ναι	Samsung Internet Android Πλήρης υποστήριξη Ναι

Legend Πλήρης υποστήριξη Πλήρης υποστήριξη

Διαφορετικά προγράμματα περιήγησης δεν συμφωνούν πάντα εάν ένα συμβάν αλλαγής πρέπει να ενεργοποιείται για συγκεκριμένους τύπους αλληλεπίδρασης. Για παράδειγμα, η πλοήγηση με πληκτρολόγιο σε στοιχεία δεν πυροδότησε ποτέ ένα συμβάν αλλαγής στο Gecko έως ότου ο χρήστης πάτησε Enter ή άλλαξε την εστίαση μακριά από το (βλ. σφάλμα 126379). Ωστόσο, από τον Firefox 63 (Quantum), αυτή η συμπεριφορά είναι συνεπής μεταξύ όλων των μεγάλων προγραμμάτων περιήγησης.

Έχω ένα στοιχείο εισαγωγής και θέλω να συνεχίσω να ελέγχω το μήκος του περιεχομένου και όποτε το μήκος φτάνει σε ένα συγκεκριμένο μέγεθος, θέλω να ενεργοποιήσω το κουμπί υποβολής, αλλά αντιμετωπίζω πρόβλημα με το συμβάν javascript onchange καθώς το συμβάν ενεργοποιείται μόνο όταν το στοιχείο εισόδου βγαίνει εκτός πεδίου εφαρμογής και όχι όταν αλλάζει το περιεχόμενο.

Το Onchange δεν ενεργοποιείται όταν αλλάζει το περιεχόμενο του ονόματος, αλλά ενεργοποιείται μόνο όταν το όνομα βγαίνει εκτός εστίασης.

Μπορεί να γίνει κάτι για να λειτουργήσει αυτό το συμβάν στην αλλαγή του περιεχομένου; ή κάποια άλλη εκδήλωση που μπορώ να χρησιμοποιήσω για αυτό; Βρήκα μια λύση χρησιμοποιώντας τη λειτουργία onkeyup, αλλά δεν λειτουργεί όταν επιλέγουμε κάποιο περιεχόμενο από την αυτόματη συμπλήρωση του προγράμματος περιήγησης.

Θέλω κάτι που μπορεί να λειτουργήσει όταν αλλάζει το περιεχόμενο του πεδίου, πληκτρολόγιο ή ποντίκι... καμιά ιδέα;

(συνάρτηση () ( var oldVal; $("#όνομα").on("αλλαγή εισαγωγής κειμένου Εισαγωγής", συνάρτηση () ( var val = this.value; if (val !== oldVal) ( oldVal = val; checkLength(val); ) )); )());

Αυτό θα πιάσει την αλλαγή , πληκτρολογήσεις, επικόλληση , εισαγωγή κειμένου , εισαγωγή (αν είναι διαθέσιμη). Και μην πυροβολείτε περισσότερο από όσο χρειάζεται.

Ο παράγοντας χρήστη πρέπει να στείλει αυτό το συμβάν όταν ένας ή περισσότεροι χαρακτήρες. Αυτοί οι χαρακτήρες μπορούν να προέρχονται από διάφορες πηγές, όπως χαρακτήρες που προκύπτουν από το πάτημα ή την απελευθέρωση ενός πλήκτρου σε μια συσκευή πληκτρολογίου, την επεξεργασία του επεξεργαστή μεθόδου εισαγωγής ή από φωνητική εντολή. Εάν η λειτουργία "επικόλληση" δημιουργεί μια απλή ακολουθία χαρακτήρων, δηλαδή ένα πέρασμα κειμένου χωρίς καμία πληροφορία δομής ή στυλ, αυτός ο τύπος συμβάντος πρέπει επίσης να δημιουργηθεί.

Blockquote>

Ενεργοποιείται στα στοιχεία ελέγχου όταν ο χρήστης αλλάζει τιμή

Blockquote>

Θα χρειαστεί να χρησιμοποιήσετε έναν συνδυασμό onkeyup και onclick (ή onmouseup) εάν θέλετε να πιάσετε οποιαδήποτε ευκαιρία.

Εδώ είναι μια άλλη λύση που αναπτύσσω για το ίδιο πρόβλημα. Ωστόσο, χρησιμοποιώ πολλά πεδία εισαγωγής, επομένως διατηρώ την παλιά τιμή ως χαρακτηριστικό που ορίζεται από τον χρήστη των ίδιων των στοιχείων: "data-value". Χρήση jQueryτόσο εύκολο στη διαχείριση.

$(document).delegate(".filterBox", "keyup", ( self: this ), function (e) ( var self = e.data.self; if (e.keyCode == 13) ( e.preventDefault(); $(this).attr("data-value", $(this).val()); self.filtere (trueBy)(trueBy) ).val(""); $(this). attr("data-value", ""); self.filterBy(this, true) ) else ( if ($(this).attr("data-value") != $(this).val()) ($(this).attr("data-value", $(this).valter)(self));

εδώ, χρησιμοποίησα 5-6 πεδία εισαγωγής, έχει κλάση filterBox, φτιάχνω τη μέθοδο filterBy μόνο εάν η τιμή δεδομένων είναι διαφορετική από τη δική της τιμή.