Событие ввода не работает, если значение изменено с помощью jQuery val() или JavaScript

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

var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ 1

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

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

$input.trigger("input");

var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  // Change the value and trigger input
  $input.val($input.val() + 'x').trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="myinput" type="text" />
<button id="change">Change value</button>

Ответ 2

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

<input id="myinput" type="text" oninput="sample_func()" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

var input = $("#myinput");

function sample_func(){
  alert(input.val());
}

$('#change').click(function() {
  input.val(input.val() + 'x');
});

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

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

var input = $("#myinput");

input.on("input", function() {
  alert(input.val());
});

$('#change').click(function() {
  input.val(input.val() + 'x');
});

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

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

var input = $("#myinput");

setInterval(function() { ObserveInputValue(input.val()); }, 100);

$('#change').click(function() {
  input.val(input.val() + 'x');
});

Ответ 3

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

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

var $input = $("#myinput");

$input.on('change paste keyup', function() {
  alert($(this).val());
});

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("change");
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ 4

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

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

$.fn.changeTextField = function (value) {
  return $(this).val(value).trigger("change");
}

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

$("#myInput").changeTextField("foo");

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

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test stuff</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        </head>
        <body>

  <input id="myInput" type="text" />
        <button id="myButton">Change value</button>

        <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).trigger("change");
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>
        </body>
    </html>

Для справки, этот вопрос действительно уже был дан здесь: Почему событие изменения jquery не запускается, когда я устанавливаю значение select с помощью val()?

и здесь: JQuery обнаружение события изменения программы

Ответ 5

var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});

<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="*https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js*"></script>

Ответ 6

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

Источник: fooobar.com/questions/44107/...

 <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).dispatchEvent(new Event("input", { bubbles: true });
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>

Ответ 7

$input.val($input.val() + 'x')
$input.trigger('change');

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