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

Событие 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

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


Последняя дата редактирования : 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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.