Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Событие oninput javascript

Поддержи проект!!! smile

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

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

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

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

  2. Использование "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" в теге - начните печатать в поле ввода.

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

  3. Использование "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"

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

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

  4. Использование "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

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

  5. Использование "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

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


Вас может еще заинтересовать список тем : #JS | #JS_EVENTS | #CLICK |
Последняя дата редактирования : 22.01.2021 19:55
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
oninput oninput js html oninput oninput javascript событие oninput addeventlistener oninput



Построение гравиков
Последние комментарии :
Марат :
08/02/2021 02:50
Всегда пожалуйста приходите ещё!
подробнее.
Павел :
08/02/2021 11:11
Спасибо большое. Очень поучительно.
подробнее.
Марат :
03/02/2021 07:22
03/02/2021Тестирование и разработка Comments+1.5 отложена на неопределенное…
подробнее.
Марат :
31/01/2021 08:31
Всегда пожалуйста!Рад, что помог!
подробнее.
Bambr :
31/01/2021 07:34
Огромное спасибо! )
подробнее.

'; ';