Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие. Метод имеет три варианта использования:
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject .
handler(eventObject)
— см. выше.
eventData
— дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...} .
Убрать установленный обработчик можно с помощью метода unbind() .
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования change() , можно найти в описании этих методов.
Напомним, что событие change происходит не непосредственно в момент изменения, а только при потери фокуса измененного элемента формы.
Пример// установим обработчик события change, элементу с идентификатором foo $("#foo" ) .change (function () { alert ("Элемент foo был изменен." ) ; } ) ; // вызовим событие change на элементе foo $("#foo" ) .change () ; // установим еще один обработчик события change, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(".block" ) .change ({ a: 12 , b: "abc" } , function (eventObject) { var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; alert ("Элемент с классом block был изменен. " + "В обработчик этого события переданы данные: " + externalData ) ; } ) ;
У меня есть элемент ввода, и я хочу продолжать проверять длину содержимого, и всякий раз, когда длина становится равным определенному размеру, я хочу включить кнопку отправки, но я столкнулся с проблемой с событием onchange javascript поскольку событие срабатывает только тогда, когда входной элемент выходит за пределы области действия, а не когда содержимое изменяется.
Onchange не срабатывает при изменении содержимого имени, но только срабатывает, когда имя выходит из фокуса.
Можно ли что-то сделать, чтобы это событие работало над изменением контента? или какое-то другое событие, которое я могу использовать для этого? Я нашел обходное решение, используя функцию onkeyup, но это не срабатывает, когда мы выбираем некоторый контент из автоматического дополнения браузера.
Я хочу что-то, что может работать, когда содержимое поля изменяется, клавиатура или мышь... любые идеи?
(function () { var oldVal; $("#name").on("change textInput input", function () { var val = this.value; if (val !== oldVal) { oldVal = val; checkLength(val); } }); }());
Это приведет к улавливанию change , нажатия клавиш, paste , textInput , input (если доступно). И не стрелять больше, чем необходимо.
Пользовательский агент должен отправить это событие, когда один или более символов. Эти символы могут исходить из множества источников, например символов, возникающих в результате нажатия или отпускания ключа на клавиатурном устройстве, обработки обработки редактора метода ввода или в результате голосовой команды. Если операция «вставить» генерирует простую последовательность символов, т. Е. Текстовый проход без какой-либо информации о структуре или стиле, этот тип события также должен быть сгенерирован.
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.filterBy(this, true) } else if (e.keyCode == 27) { $(this).val(""); $(this).attr("data-value", ""); self.filterBy(this, true) } else { if ($(this).attr("data-value") != $(this).val()) { $(this).attr("data-value", $(this).val()); self.filterBy(this); } } });
здесь, я использовал 5-6 полей ввода, имеет класс filterBox, я делаю метод filterBy, только если значение данных отличается от собственного значение.
Происходит сразу после того как значение элемента изменилось, а событие onchange происходит, когда элемент теряет фокус. Другим отличием является то, что событие onchange имеет более широкую поддержку браузерами и работает с такими элементами как , и более расширено с элементом .
Поддержка браузерами| onchange | Да | Да | Да | Да | Да | Да |
Пример вывода текста, набранного в элементе при смене фокуса, используя атрибут событий onchange . Обратите внимание, что если бы мы использовали атрибут событий oninput , то текст отображался бы сразу, а не при смене фокуса.
Событие onchangeНабирите произвольный текст и уберите фокус с элемента:
function testFunction() { var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "Вы набрали следующий текст: " + x; }Набирите произвольный текст и уберите фокус с элемента:
Пример вывода значения value тега (пункт раскрывающегося списка), используя атрибут событий onchange .
Событие onchangeВыберите желание из списка:
Желание 1 Желание 2 Желание 3 function wishFunction() { var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "Вы выбрали: " + z; }Выберите желание из списка:
Желание 1 Желание 2 Желание 3
Рассмотрим пример изменения двухмерного поворота элемента, используя CSS свойство transform , HTML атрибута событий onchange и функции на JavaScript:
Двухмерный поворот элемента в CSS #test { width : 100px ; /* устанавливаем ширину блока */ height : 100px ; /* устанавливаем высоту блока */ margin : 20px ; /* устанавливаем величину внешнего отступа для всех сторон элемента */ border : 1px solid orange ; /* устанавливаем сплошную границу размером 1px оранжевого цвета */ background : khaki ; /* устанавливаем цвет заднего фона */ transform : rotate(0deg) ; /* устанавливаем, что двухмерный поворот отсутствует */ -webkit-transform : rotate(0deg) ; -ms-transform : rotate(0deg) ; /* для поддержки ранних версий браузеров */ } function rotate(value) { /* создаем функцию для изменения значения стиля элемента с id = test, с отображением результата изменения в элементе с id = result и поддержкой ранних версий браузера */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate(" + value + "deg)" ; /* поддержка ранних версий браузера */ document.getElementById("test" ).style.MozTransform = "rotate(" + value + "deg)" ; /* поддержка ранних версий браузера */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = value + "deg" ; }Передвиньте бегунок для поворота элемента:
transform: rotate( 0deg ); Rotate me _element"> element HTML Choose an ice cream flavor: Select One … Chocolate Sardine VanillaBody { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; }
JavaScript const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => { const result = document.querySelector(".result"); result.textContent = `You like ${event.target.value}`; }); Result Text input elementFor some elements, including , the change event doesn"t fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.
HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); function updateValue(e) { log.textContent = e.target.value; } Result Specifications| HTML Living Standard The definition of "change" in that specification. |
Living Standard |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet | |||||||||||
| Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements never fired a change event in Gecko until the user hit Enter or switched the focus away from the (see bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.
Обработчик OnChange вызывается при изменении любого поля ввода или нажатии на любую кнопку.
Аргумент Name содержит имя поля ввода или кнопки в нижнем регистре.
Пример: Procedure OnChange(Name: String); Begin // Если изменены поля цена или кол-во, то рассчитываем сумму If Name="price" Or Name="cnt" Then Summa:= RoundMul(Price, Cnt, 2); // Если изменено поле сумма, то рассчитываем цену. If Name="summa" Then Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); End;
Аналогичный эффект можно получить при использовании обработчиков OnPriceChange, OnCntChange, OnSummaChange.
Пример: Procedure OnPriceChange; Begin Summa:= RoundMul(Price, Cnt, 2); End; Procedure OnCntChange; Begin Summa:= RoundMul(Price, Cnt, 2); End; Procedure OnSummaChange; Begin Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); End;
Этот обработчик удобно использовать при организации модульности, так как он собирает информацию практически обо всех событиях. Например:
Var BaseClass: Variant; Procedure OnCreate; Begin BaseDocument.Init(Self); // Создание базового класса и обмен с ним ссылками. Инициализация документа. End; Procedure OnChange(Name: String); Begin BaseClass.OnChange(Name); // Передача событий базовому классу End;
Или пример модульности с использованием синглтона (свойство модуля на вкладке редактора Описание):
Procedure OnCreate; Begin BaseClass.OnCreate(Self); // Инициализация документа. End; Procedure OnChange(Name: String); Begin BaseClass.OnChange(Self, Name); // Передача событий базовому классу. End;
