Событие oninput javascript

"oninput event". Как работает событие oninput , разберем синтаксис с примерами.

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

1. Что такое "oninput".
2. Использование "oninput" внутри тега HTML(без javascript).
3. Использование "oninput" внутри тега HTML.(функция)
4. Использование "oninput" через javascript
5. Использование "oninput" и "addEventListener"

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

Как обычно с самого начала - давайте дадим определение - "что такое oninput".

"oninput" - это событие(event) в javascript - позволяет настроить срабатывание скрипта, когда пользователь вводит данные в поля ввода.




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

Самый простой пример использования "oninput" внутри тега HTML.

Нам понадобится:

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

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

oninput="info1.innerHTML=this.value"

<input type="text" oninput="info1.innerHTML=this.value">

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

<p id = "info1">Сюда будет передаваться текст</p>

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

Для того, чтобы проверить работу "oninput" в теге - начните печатать в поле ввода.

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




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

Как использовать "oninput" внутри тега HTML - разберем в этом пункте!

Один из синтаксисов - использование oninput внутри тега html


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

<element oninput = "script">

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

Для того, чтобы использовать "oninput" внутри тега, нам понадобится:

Для иллюстрации "oninput" нам потребуется input, в который поместим.

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

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

<input type="text" id="teg_on_input" oninput="my_FOO()">

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

<p id = "info">Сюда будет передаваться текст</p>

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

<script>
function my_FOO() {
var x = document.getElementById("teg_on_input").value;
document.getElementById("info").innerHTML = x;
}
</script>


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

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

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




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

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

<input type="text" id="testid">

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

<p id="info2">Сюда будет передаваться текст</p>

<script>
testid.oninput = function () {
var x = document.getElementById("testid").value;
document.getElementById("info2").innerHTML = x;
}
</script>


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

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




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

Еще вариант использования "oninput" вместе с "addEventListener":

Синтаксис:
object.addEventListener("input", myScript);

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

Html:

<input type="text" id="testid3">

<p id="info3">Сюда будет передаваться текст</p>

Javascript
<script>

document.getElementById("testid3").addEventListener("input", function() {
  var x = document.getElementById("testid3").value;
  document.getElementById("info3").innerHTML = x;
});
</script>


Результат работы свойства "oninput" и addEventListener

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