Jquery oninput не работает

Fire oninput event with jQuery

I have an oninput event on a textarea to check the height and resize it. Now I need to edit the value sometimes. I do this just by editting the val() in jQuery, but that does not trigger the oninput event. Is there any way to trigger the oninput event programatically with jQuery?

7 Answers 7

Use .on(‘input’) . For example:

It is a bit too late, but for future reference, there is the .trigger method.

You can simply invoke it, e.g.:

. but as @Sammaye points out, jQuery has no explicit «oninput» handler, so you’ll have to use POJS.

oninput is not actually in JQuery yet.

You can see posts about it here:

Basically the general consensus is that they don’t want it yet.

But no, changing val() directly would not trigger the html5 oninput because it’s specification states it is when the user, in the UI, changes the value of the input.

However some one has kindly made a plugin for people who wish to use HTML5 only events: https://github.com/dodo/jquery-inputevent

You can bind to input and change:

input will be triggered at user input

change will be triggered at change() and to val(» «) assignments, but after some changes

after you binded to change you can call it manualy on each val(» «) assignment:

or you can overwrite jQuery val(» «) method to trigger change on each user val(» «) call:

Источник

Изменение: change, input, cut, copy, paste

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/events-change-input.

На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.

Событие change

Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.

Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.

Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие onchange .

Для остальных же элементов: select , input type=checkbox/radio оно срабатывает сразу при выборе значения.

В IE8- checkbox/radio при изменении мышью не инициируют событие сразу, а ждут потери фокуса.

Для того, чтобы видеть изменения checkbox/radio тут же – в IE8- нужно повесить обработчик на событие click (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием propertychange , описанным далее.

Событие input

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

В IE9 оно поддерживается частично, а именно – не возникает при удалении символов (как и onpropertychange ).

Пример использования (не работает в IE8-):

В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.

Если бы ещё не проблемы со старыми IE… Впрочем, их можно решить при помощи события propertychange .

IE10-, событие propertychange

Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования – исправление недочётов обработки событий в старых IE.

Если поставить его на checkbox в IE8-, то получится «правильное» событие change :

Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо oninput .

К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания onpropertychange + oninput недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.

События cut, copy, paste

Эти события используются редко. Они происходят при вырезании/вставке/копировании значения.

К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение – это отмена соответствующей операции.

Например, вот так:

Пример: поле с контролем СМС

Как видим, событий несколько и они взаимно дополняют друг друга.

Посмотрим, как их использовать, на примере.

Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.

Как такое реализовать?

Событие input идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.

В IE8- событие input не поддерживается, но, как мы видели ранее, есть onpropertychange , которое может заменить его.

Что же касается IE9 – там поддерживаются и input и onpropertychange , но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи keyup на Delete и BackSpace . А вот удаление командой «вырезать» из меню – сможет отловить лишь oncut .

Получается вот такая комбинация:

Здесь мы добавили вызов showCount на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи throttle -декоратора, описанного в задаче Тормозящий (throttling) декоратор.

Есть и совсем другой простой, но действенный вариант: через setInterval регулярно проверять значение и, если оно слишком длинное, обрезать его.

Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по onfocus , а прекращать – по onblur , вот так:

Обратим внимание – весь этот «танец с бубном» нужен только для поддержки IE8-, в которых не поддерживается oninput и IE9, где oninput не работает при удалении.

Итого

События изменения данных:

Событие	Описание	Особенности
change	Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.	В IE8- на чекбоксах ждёт потери фокуса, поэтому для мгновенной реакции ставят также onclick -обработчик или onpropertychange .
input	Событие срабатывает только на текстовых элементах. Оно не ждёт потери фокуса, в отличие от change .	В IE8- не поддерживается, в IE9 не работает при удалении символов.
propertychange	Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в event.propertyName . Используют для мгновенной реакции на изменение значения в старых IE.	В IE9 не срабатывает при удалении символов.
cut/copy/paste	Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт.	Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.

Ещё особенность: в IE8- события change , propertychange , cut и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.

Задачи

Автовычисление процентов по вкладу

Создайте интерфейс для автоматического вычисления процентов по вкладу.

Ставка фиксирована: 12% годовых. При включённом поле «капитализация» – проценты приплюсовываются к сумме вклада каждый месяц (сложный процент).

• В поле с суммой должно быть нельзя ввести не-цифру. При этом пусть в нём работают специальные клавиши и сочетания Ctrl-X/Ctrl-V.
• Изменения в форме отражаются в результатах сразу.

Алгоритм решения такой.

Только численный ввод в поле с суммой разрешаем, повесив обработчик на keypress .

Отслеживаем события изменения для перевычисления результатов:

• На input : событие input и дополнительно propertychange/keyup для совместимости со старыми IE.
• На checkbox : событие click вместо change для совместимости с IE8-.
• На select : событие change .

Источник

Событие oninput javascript

Подробно о событии oninput

Что такое «oninput«.

Использование «oninput» внутри тега HTML(без javascript).

Тег input с типом text.

Внутрь тега помещаем вот такую конструкцию — если перевести на русский, то получится вот так — получаем данные вводимые прямо здесь и сейчас(this.value) + отправляем их в блок, который имеет с помощью innerHTML

далее нам понадобится блок, куда будем передавать:

Сюда будет передаваться текст

Результат получения и передачи данных с помощью «oninput«

Сюда будет передаваться текст

Использование «oninput» внутри тега HTML.(функция)

Синтаксис oninput в HTML:

Пример использования «oninput» внутри тега HTML:

id — потом будем обращаться к нему.

Далее атрибут «oninput» с функцией my_FOO()? собираем все вместе:

Куда будем передавать полученные данные через oninput

Сюда будет передаваться текст

Далее скрипт javascript , который это обработает:

Результат получения и передачи данных с помощью «oninput«

Для того, чтобы увидеть результат — напечатайте что нибудь.

Сюда будет передаваться текст

Использование «oninput» через javascript

Нам опять понадобится input и добавим ему кроме типа — id Ж

Куда будем передавать текст, который получим:

Сюда будет передаваться текст

Результат работы свойства «oninput» в javascript

Сюда будет передаваться текст

Использование «oninput» и «addEventListener»

Не будет тянуть кода за хвост — сразу давайте перейдем коду — особой разницы с предыдущем пунктом нет, только наличие «addEventListener»

Источник

jQuery’ input ‘ событие

Я никогда не слышал о событии в jQuery под названием input пока я не увидел это jsfiddle.

вы знаете, почему это работает? Это псевдоним для keyup или что-то?

8 ответов:

происходит, когда текстовое содержимое элемента изменилось через пользовательский интерфейс.

это не совсем псевдоним keyup , потому что keyup сработает, даже если клавиша ничего не делает (например: нажатие и затем отпускание клавиши управления вызовет keyup событие).

хороший способ думать об этом так: это событие, которое срабатывает всякий раз, когда изменяется вход. Это включает в себя-но не ограничивается-нажатие клавиш, которые изменяют вход (так, например, Ctrl само по себе не вызовет событие, но Ctrl-V чтобы вставить какой-то текст будет), выбрав опцию автоматического завершения, Linux-стиль среднего щелчка вставить, перетащить и падение, и много других вещей.

посмотреть этой страница и комментарии к этому ответу для более подробной информации.

oninput событие очень полезно для отслеживания изменений полей ввода.

однако он не поддерживается в IE версии onpropertychange что делает то же самое как oninput .

так что вы можете использовать его таким образом:

чтобы иметь полную поддержку crossbrowser.

так как propertychange может быть вызван для любого изменения свойства, например, отключенное свойство изменяется, то вы хотите сделать включить это:

С помощью jQuery, идентичны по сути:

С input событие, однако, только второй шаблон, кажется, работает в браузерах, которые я тестировал.

таким образом, вы ожидаете, что это сработает, но это не так (по крайней мере, в настоящее время):

опять же, если вы хотите использовать делегирование событий (например, чтобы настроить событие на #container перед input.text добавляется в DOM), это должно прийти ум:

к сожалению, опять же, это не работает в настоящее время!

работает только этот шаблон:

ОТРЕДАКТИРОВАНО С БОЛЕЕ АКТУАЛЬНОЙ ИНФОРМАЦИЕЙ

Я, конечно, могу подтвердить, что этот рисунок:

теперь работает также, во всех «стандартных» браузерах.

Как сказал клаустрофоб, oninput поддерживается для IE9+.

, » событие oninput является багги в Internet Explorer 9. Он не запускается, когда символы удаляются из текстового поля через пользовательский интерфейс только при вставке символов. Хотя событие onpropertychange поддерживается в Internet Explorer 9, но, как и событие oninput, оно также является багги, оно не запускается при удалении.

Так как символы могут быть удалены в нескольких способы (клавиши Backspace и Delete, CTRL + X, команда Cut и Delete в контекстном меню), нет хорошего решения для обнаружения всех изменений. Если символы удаляются с помощью команды удалить контекстного меню, изменение не может быть обнаружено в JavaScript в Internet Explorer 9.»

У меня есть хорошие результаты привязки к вводу и keyup (и keydown, если вы хотите, чтобы он срабатывал в IE, удерживая клавишу Backspace).

будьте осторожны при использовании ввода. Это событие срабатывает при фокусировке и размытии в IE 11. Но он запускается при изменении в других браузерах.

Я думаю, что «input» просто работает здесь так же, как и «oninput» в модели событий уровня O DOM.

Так же, как silkfire прокомментировал это, я тоже погуглил для «jQuery input event». Таким образом, я был приведен сюда и поражен, узнав, что «вход» является приемлемым параметром для jquery bind (). В jQuery в действии (стр. 102, 2008 изд.) «вход» не упоминается как возможное событие (против 20 других, от «размытия» до «разгрузка»). Верно, что на стр. 92 можно было бы предположить обратное из перечитывания (т. е. из ссылки на различные строковые идентификаторы между моделями уровня 0 и уровня 2). Это очень вводит в заблуждение.

jQuery имеет следующую подпись для .on() способ: .on( events [, selector ] [, data ], handler )

события могут быть любыми из перечисленных в этой ссылке:

хотя, они не все поддерживаются каждым браузером.

Mozilla заявляет следующее о входном событии:

событие ввода DOM запускается синхронно, когда значение или элемент измененный. Кроме того, он срабатывает contenteditable Редакторы при изменении его содержимого.

Источник

Input событие не работает, если значение изменяется на jQuery val() или JavaScript

Если я изменяю значение поля input программно, события input и change не срабатывают. Например, у меня есть такой сценарий:

Проблема: событие срабатывает, когда я набираю текстовое поле, но не при нажатии кнопки. Есть ли способ достичь этого с помощью какого-то события или иным образом, не делая этого вручную?

Чего я не хочу делать: я мог бы пройти через весь свой код, чтобы добавить trigger или вызов функции везде вручную, но это не то, что я ищу.

Почему: основная причина, по которой я хотел бы сделать это автоматически, заключается в том, что у меня есть много полей input и много разных мест, где я программно изменяю эти входные данные. Это сэкономило бы мне много времени, если бы был способ автоматически запускать событие при изменении любого input в любом месте моего кода.

7 ответов

Пример здесь размещены http://jsfiddle.net/aS87B/3 / Вот 3 поля ввода First input

Second input

Простое решение:

Триггер input после вызова val() :

Конкретное решение:

Как уже упоминалось, вы не хотите запускать input вручную. Это решение автоматически запускает событие, переопределяя val() .

Просто добавьте это в свой код:

См . Демо-версию JSFiddle

PS

Обратите внимание на this.is(‘input:text’) в состоянии. Если вы хотите вызвать событие для большего количества типов, добавьте их в условие.

Есть несколько способов, как этого достичь. Здесь вы можете использовать событие levelup HTML oninput() , которое происходит сразу же при изменении элемента, и вызвать функцию.

Или эта вещь jQuery, input (просто связанная с приведенным выше примером).

Вы также можете использовать javascript setInterval() , который постоянно выполняется с заданным интервалом времени. Это только необязательно и лучше всего, если вы выполняете программу, связанную с временем.

Я пытаюсь предупредить значение с помощью jquery, когда оно генерируется из кода javascript, значение генерируется в поле input проблема в том, что jquery не может обнаружить изменения, команды, которые я тестировал, — это change, input, но когда я вручную input запускаю значение jquery пример.

Я хочу вызывать эту функцию всякий раз, когда изменяется входной сигнал. Я создал следующее в своем файле home.html и в файле.

jQuery прослушиватели работают только с реальными событиями браузера, и они не выбрасываются, когда вы что-то изменяете программно.

Вы можете создать свое собственное миниатюрное расширение jQuery для прокси-сервера, чтобы всегда запускать событие, но делать это нужно только в одном модульном месте, например:

Затем просто вызывайте новую функцию всякий раз, когда вы хотите обновить текстовое поле, вместо того, чтобы использовать функцию jQuery ‘val’:

Вот версия, работающая с функцией прокси:

Похоже, нет другого способа, кроме как использовать .trigger() .

Давайте попробуем то же самое, используя событие .change() :

Или вам нужно запустить его вручную:

Отрывок

Триггер не сработал. Создание события и отправка с помощью native JavaScript сделали свою работу.

Событие изменения срабатывает только при размытии input.

Похожие вопросы:

Мне нужно запустить событие , если входной текст изменился через Javascript с помощью .val() , начиная с jQuery API ( https://api.jquery.com/change/ ): Note: Changing the value of an input element.

Я использую Facebox ( http: / / defunkt.github.com/facebox/ ) на одном из моих сайтов. Кроме того, я широко использую jQuery на этом сайте. Моя проблема в том, что функция .val(), похоже, не.

Я хочу вызывать эту функцию всякий раз, когда изменяется входной сигнал. Я создал следующее в своем файле home.html изменяется с помощью кода JavaScript? Например: $input.value = 12; Событие input здесь не помогает, потому что это не пользователь меняет.

Я могу обнаружить, если input изменяет значение при вводе, вставке и т. д., Но если значение динамически изменяется из другого скрипта, я не могу его обнаружить: Допустим, у меня есть input.

На моей веб-странице значение входных данных изменяется приложением js, но я хочу вызвать событие, когда значение изменяется. Проблема заключается в том, что когда значение изменяется приложением.

Источник