Процедур OnChange(Нэр: Мөр) Дурын талбарыг өөрчлөх эсвэл товчлуур дээр дарна уу. Үйл явдлын зохицуулагч эсвэл эх сурвалжийг өөрчлөх Onchange үйл явдал дээр үндэслэн вэб маягтыг дахин зур
_элемент">
HTML
Үндсэн хэсэг (дэлгэц: тор; тор-загвар-талбай: "үр дүнг сонгох"; ) сонгох ( сүлжээний талбай: сонгох; ) .үр дүн ( сүлжээний талбай: үр дүн; )
JavaScript
const selectElement = document.querySelector(".зайрмаг"); selectElement.addEventListener("өөрчлөх", (үйл явдал) => (const result = document.querySelector(".result"); result.textContent = `Танд $(event.target.value) таалагдаж байна`; ));Үр дүн
Текст оруулах элемент
Зарим элементүүдийн хувьд, үүнд , өөрчлөлтийн үйл явдал нь удирдлага анхааралаа алдах хүртэл ажиллахгүй. Доорх талбарт ямар нэг зүйл оруулаад дараа нь өөр газар дарж үйл явдлыг идэвхжүүлнэ.
HTML
JavaScript
const оролт = document.querySelector("оролт"); const log = document.getElementById("лог"); input.addEventListener("өөрчлөх", updateValue); функцийг шинэчлэхValue(e) ( log.textContent = e.target.value; )Үр дүн
Үзүүлэлтүүд
| Тодорхойлолт | Статус |
|---|---|
| HTML амьдралын стандарт Тэр тодорхойлолтод "өөрчлөлт" гэсэн тодорхойлолт. |
Амьдралын стандарт |
Хөтөчийн нийцтэй байдал
Энэ хуудсан дээрх нийцтэй байдлын хүснэгтийг бүтэцлэгдсэн өгөгдлөөр үүсгэсэн. Хэрэв та өгөгдөлд хувь нэмрээ оруулахыг хүсвэл https://github.com/mdn/browser-compat-data хаягаар орж, татах хүсэлтээ бидэнд илгээнэ үү.
GitHub дээрх нийцтэй байдлын өгөгдлийг шинэчлэх
| Ширээний компьютер | Гар утас | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Ирмэг | Firefox | Internet Explorer | Дуурь | Сафари | Android вэб үзэх | Android-д зориулсан Chrome | Android-д зориулсан Firefox | Android-д зориулсан Opera | iOS дээрх Safari | Samsung интернет | |
| өөрчлөлт | Chrome бүрэн дэмжлэг Тийм | Edge Бүрэн дэмжлэг 12 | Firefox Бүрэн дэмжлэг Тийм | IE Бүрэн дэмжлэг Тийм | Opera Бүрэн дэмжлэг Тийм | Safari бүрэн дэмжлэг Тийм | WebView Android Бүрэн дэмжлэг Тийм | Chrome Android Бүрэн дэмжлэг Тийм | Firefox Android Бүрэн дэмжлэг Тийм | Opera Android Бүрэн дэмжлэг Тийм | Safari iOS Бүрэн дэмжлэг Тийм | Samsung Internet Android Бүрэн дэмжлэг Тийм |
Домог
Бүрэн дэмжлэгБүрэн дэмжлэгӨөр өөр хөтчүүд тодорхой төрлийн харилцан үйлчлэлийн хувьд өөрчлөлтийн үйл явдлыг эхлүүлэх эсэх талаар үргэлж санал нийлдэггүй. Жишээлбэл, элемент дэх гарны навигаци нь сонголтуудын цэсээр хангадаг удирдлагыг төлөөлдөг">
Надад оролтын элемент байгаа бөгөөд би агуулгын уртыг үргэлжлүүлэн шалгахыг хүсч байгаа бөгөөд урт нь тодорхой хэмжээтэй тэнцэх болгонд би илгээх товчийг идэвхжүүлэхийг хүсч байгаа боловч энэ үйл явдал зөвхөн дараах үед асдаг тул javascript onchange үйл явдалд асуудал тулгараад байна. Оролтын элемент нь агуулга өөрчлөгдөхөд биш харин хамрах хүрээнээс гардаг.
Onchange нь нэрний агуулга өөрчлөгдөхөд асдаггүй, харин нэр нь фокусаас гарах үед л асдаг.
Энэ үйл явдлыг агуулгыг өөрчлөхийн тулд ямар нэгэн зүйл хийж болох уу? эсвэл би үүнд ашиглаж болох өөр арга хэмжээ байна уу? Би onkeyup функцийг ашиглан тойрон гарах арга замыг олсон боловч хөтчийн автоматаар нэмэх хэсгээс зарим контентыг сонгоход энэ нь ажиллахгүй байна.
Би талбарын агуулга өөрчлөгдөхөд ажиллах боломжтой зүйлийг хүсч байна, гар эсвэл хулгана ... ямар нэг санаа байна уу?
(функц () ( var oldVal; $("#name").on("текстОролтын оролтыг өөрчлөх", функц () ( var val = this.value; if (val !== oldVal) ( oldVal = val; checkLength() val);
Энэ нь өөрчлөлт , товчлуур дарах, буулгах , textInput , оролтыг (боломжтой бол) барих болно. Мөн шаардлагатай хэмжээнээс илүү буудаж болохгүй.
Нэг буюу хэд хэдэн тэмдэгттэй тулгарах үед хэрэглэгчийн агент энэ үйл явдлыг илгээх ёстой. Эдгээр тэмдэгтүүд нь гар төхөөрөмж дээрх товчлуурыг дарах, суллах, оролтын аргын засварлагчийн боловсруулалт, эсвэл дуут тушаал. Хэрэв "буулгах" үйлдэл нь энгийн тэмдэгтүүдийн дарааллыг үүсгэдэг бол ямар ч бүтэц, хэв маягийн мэдээлэлгүй текст дамжуулалт үүсгэдэг бол энэ үйл явдлын төрлийг мөн үүсгэх ёстой.
Blockquote>
Хэрэглэгч утгыг өөрчлөх үед хяналтыг ажиллуулна
Blockquote>
Хэрэв та ямар нэгэн боломжийг ашиглахыг хүсвэл onkeyup болон onclick (эсвэл onmouseup) хослолыг ашиглах хэрэгтэй болно.
Үүнтэй ижил асуудлыг шийдэх өөр нэг шийдэл энд байна. Гэсэн хэдий ч би олон тооны оролтын талбаруудыг ашигладаг тул хуучин утгыг "өгөгдлийн утга" гэсэн элементүүдийн хэрэглэгчийн тодорхойлсон шинж чанар болгон хадгалдаг. jQuery ашиглаж байнаудирдахад маш хялбар.
$(document).delegate(".filterBox", "keyup", ( self: this ), функц (e) ( var self = e.data.self; if (e.keyCode == 13) ( e.preventDefault( ); $(this).attr("өгөгдлийн утга", $(энэ).val()); self.filterBy(энэ, үнэн) ) if (e.keyCode == 27) ( $(энэ). val(""); $(энэ).attr("өгөгдлийн утга", "" self.filterBy(энэ, үнэн) ) else ( if ($(энэ).attr("өгөгдлийн утга") ! = $(энэ).val()) ( $(энэ).attr("өгөгдлийн утга", $(энэ).val()); self.filterBy(энэ); ) ) ));
Энд би 5-6 оролтын талбар ашигласан, filterBox класстай, өгөгдлийн утга нь өөрийн утгаас өөр байвал би filterBy аргыг л хийж байна.
Аливаа оролтын талбарыг өөрчлөх эсвэл аль нэг товчлуурыг дарахад OnChange зохицуулагч дуудагдана.
Нэрийн аргумент нь оруулах талбар эсвэл товчлуурын жижиг нэрийг агуулна.
Жишээ: Procedure OnChange(Нэр: Мөр); Эхлэх // Хэрэв үнэ эсвэл тоо хэмжээний талбарууд өөрчлөгдсөн бол дүнг тооцоолно ууХэрэв Name="price" эсвэл Name="cnt" байвал Summa:= RoundMul(Price, Cnt, 2); // Хэрэв үнийн талбар өөрчлөгдсөн бол бид үнийг тооцоолно. If Name="summa" Дараа нь Үнэ:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Төгсгөл;
Үүнтэй төстэй нөлөөг OnPriceChange, OnCntChange, OnSummaChange зохицуулагчийг ашиглан хийж болно.
Жишээ: Procedure OnPriceChange; Эхлэх нийлбэр:= RoundMul(Үнэ, Cnt, 2); Төгсгөл; Процедур OnCntChange; Эхлэх нийлбэр:= RoundMul(Үнэ, Cnt, 2); Төгсгөл; OnSummaChange журам; Эхлэх үнэ:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Төгсгөл;
Энэ зохицуулагч нь бараг бүх үйл явдлын талаар мэдээлэл цуглуулдаг тул модулийг зохион байгуулахад ашиглахад тохиромжтой. Жишээлбэл:
Var BaseClass: Хувилбар; Процедур OnCreate; Begin BaseDocument.Init(Self); // Суурь класс үүсгээд түүгээр лавлагаа солилцоно. Баримт бичгийг эхлүүлж байна.Төгсгөл; Процедур OnChange(Нэр: Мөр); BaseClass.OnChange-г эхлүүлэх(Нэр); // Үндсэн анги руу үйл явдлуудыг дамжуулахТөгсгөл;
Эсвэл синглтон ашиглан модульчлагдсан байдлын жишээ (редакторын Тодорхойлолт таб дээрх модулийн шинж чанар):
Процедур OnCreate; BaseClass.OnCreate (Өөрийгөө) эхлүүлэх; // Баримт бичгийг эхлүүлэх.Төгсгөл; Процедур OnChange(Нэр: Мөр); BaseClass.OnChange-г эхлүүлэх(Өөрийгөө, Нэр); // Үндсэн анги руу үйл явдлуудыг дамжуулах.Төгсгөл;
Заасан маягтын элементийг өөрчлөх зохицуулагчийг тохируулна, эсвэл энэ үйл явдлыг асаана. Энэ арга нь хэрэглээний гурван тохиолдолтой:
зохицуулагч(eventObject)— зохицуулагч болгон суулгах функц. Дуудлага хийх үед энэ нь үйл явдлын объектыг хүлээн авах болно eventObject .
зохицуулагч(eventObject)- дээрээс харна уу.
үйл явдлын өгөгдөл- зохицуулагч руу дамжуулсан нэмэлт өгөгдөл. Тэдгээрийг дараах форматаар объектоор дүрсэлсэн байх ёстой: (fName1:value1, fName2:value2, ...) .
Та unbind() аргыг ашиглан суулгасан зохицуулагчийг устгаж болно.
Энэ аргыг ашиглах гурван сонголт бүгд бусад аргуудын аналог (дээрхийг харна уу) тул change()-г ашиглах бүх мэдээллийг эдгээр аргуудын тайлбараас олж болно.
Өөрчлөлтийн үйл явдал нь өөрчлөлт хийх мөчид шууд тохиолддоггүй, харин өөрчлөгдсөн хэлбэрийн элемент нь анхаарал алдах үед л тохиолддог гэдгийг санаарай.
Жишээ
// foo танигчтай элементийн өөрчлөлтийн үйл явдлын зохицуулагчийг тохируулна$("#foo" ) .өөрчлөх (функц () ( дохиолол () "foo элемент өөрчлөгдсөн.") ; } ) ; // foo элемент дээрх change үйл явдлыг дуудна$("#foo" ) .өөрчлөх (); // өөр өөрчлөлтийн үйл явдал зохицуулагчийг энэ удаад элементүүдэд тохируулна // ангийн блоктой. Бид нэмэлт мэдээллийг зохицуулагч руу дамжуулах болно$(".block" ) .change (( a: 12 , b: "abc" ) , функц (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b сэрэмжлүүлэг (; "Ангийн блоктой элемент өөрчлөгдсөн."+ "Дараах өгөгдлийг энэ үйл явдлын зохицуулагч руу дамжуулсан:"+ гадаад өгөгдөл); ))) ;