JavaScript « отслеживание изменения input.value = «newvalue»; с помощью события

Используем стороннюю js библиотеку. Она работает с инпутами, и меняет значения через

input.value = "newvalue"; т.е стандартный способ.

Можно ли отследить изменения в значении поля javascript-oм?
дело в том что мы не можем менять код той библиотеки но нужно всунуть свою логику именно в этот момент, а т.е следить за изменением поля и обновлять новые кастомные поля.

То что можно повесить слушателя на onChange это понятно, он они работают если только ввод был изменен пользователем а не javascript-ом.

1 ответов


Есть несколько вариантов, которые зависят от конкретной ситуации. Расскажу про два, наиболее адекватных:

1. Использование таймера для постоянного опроса.

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


setInterval(function () {if (input.value!=oldValue){...})}, 1000);
 

+ простота
- задержка реакции на изменение значения поля
- иногда может повисать страница из-за зацикливания


2. Внедрение заготовленной функции в библиотечную.

Процесс внедрения происходит не в самом коде библиотеки, а динамически на самой странице). Это решает проблемы, например, с лицензией и тому подобным, что может мешать редактировать саму библиотеку, но несколько сложнее чем в предыдущем случае)

В основе такого внедрения лежит факт объектной природы функции в JS и специфика конвертации типов.

Приведу пример...)
Допустим у нас есть некоторая функция:

        function firstButtonClick () {
            alert('Calling function')
        }
 

И к ней необходимо добавить вызов includedFunction() следующей функции:

        function includedFunction () {
            alert('Other function');
        }
 

То мы можем провести следующие действия:

            var funcString = firstButtonClick.toString();
            // Убрать все переводы строки
            funcString=funcString.replace(/\n/g,'');
            // Вытащить тело изначальной функции
            var reg = /\{(.*)\}$/i;
            var regArr = reg.exec(funcString);
            // Получить новую функцию
            eval("firstButtonClick = function (){"+regArr[1]+" includedFunction()}");
 

Таким образов при вызове firstButtonClick будет вызываться и includedFunction, а сама firstButtonClick будет выглядеть следующим образом:

        function firstButtonClick () {
            alert('Calling function');
            includedFunction();
        }
 

Вот рабочий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="Description" content="" />
    <meta name="Keywords" content="" />
        <title>Function include exemple</title>

        <style type="text/css">
            .input_div {
                margin:0 auto;
                width:370px;
            }
        </style>

        <script type="text/javascript">

        function firstButtonClick () {
            alert('Calling function')
        }

        function secondButtonClick() {
            var funcString = firstButtonClick.toString();
            funcString=funcString.replace(/\n/g,'');
            var reg = /\{(.*)\}$/i;
            var regArr = reg.exec(funcString);
            if (regArr[1]) {
                eval("firstButtonClick = function (){"+regArr[1]+" includedFunction()}");
                // Обнавляем ссылку
                document.getElementById('firstButton').onclick = firstButtonClick;
            }
        }

        function includedFunction () {
            alert('Other function');
        }

        window.onload = function () {
            document.getElementById('firstButton').onclick = firstButtonClick;
            document.getElementById('secondButton').onclick = secondButtonClick;
        }

        </script>
    </head>
    <body>
        <div class="input_div">
            <input value="Text" id="inputField"/>
            <button id="firstButton">Call function</button>
            <button id="secondButton">Include function</button>
        </div>
    </body>
</html>
 

+отсутствие задержек
+в целом получается, будто была дописана функция из библиотеки
-в зависимости от ситуации требует достаточно сложных манипуляций

Надеюсь поможет такой вариант)))

Подскажите пожалуйста Вы не знаете как сделать отслеживание ресурса
к примеру
Стр 0
Мне нужно чтобы с нажатием на страницу менялась Стр 0 на Стр 1 если 100 раз нажать на страницу то Стр будет 100
и мне надо разместить на сайте напишите пожалуйста как это сделать сайт на uCoz


Вот смотрите
У мена на сайте uCoz эсть ссылки,я хочу их отслеживать,сколько скачали в день.
и для этого я создал новую страницу,где написано
Ссылка, скачек 0.
Ссылок примерно около 300
И не обязательно каждую проследить отдельно,можно чтобы на любую из этих 300 нажали,чтобы скачать фаил, а на другой странице я видел скольно в день скачали,и все.
Спосибо.


скажите пожалуйста к кому я могу с таким вопросом обратится чтобы могли бы помоч мне.Спасибо.