Fatal编程技术网
  • javascript/
  • 如果使用jQuery val（）或JavaScript更改值，则输入事件不起作用

如果使用jQuery val（）或JavaScript更改值，则输入事件不起作用

javascript jquery html events input

如果使用jQuery val（）或JavaScript更改值，则输入事件不起作用,javascript,jquery,html,events,input,Javascript,Jquery,Html,Events,Input,如果以编程方式更改输入字段的值，则不会触发input和change事件。例如，我有这样一个场景： var$input=$（'#myinput'）； $input.on（'input'，function（）{ //当值更改时执行此操作 警报（$input.val（））； }); $（“#更改”）。单击（函数（）{ //更改值 $input.val（$input.val（）+'x'）； }); 更改值 看来除了使用.trigger（）之外，没有别的办法了 让我们使用.change（）事件尝试相

如果以编程方式更改输入字段的值，则不会触发
input
和
change
事件。例如，我有这样一个场景：

var$input=$（'#myinput'）；
$input.on（'input'，function（）{
//当值更改时执行此操作
警报（$input.val（））；
});
$（“#更改”）。单击（函数（）{
//更改值
$input.val（$input.val（）+'x'）；
});


更改值


看来除了使用
.trigger（）
之外，没有别的办法了

让我们使用
.change（）
事件尝试相同的操作：



var$input=$（“#myinput”）；
$input.on（'change paste keyup'，function（））{
警报（$（this.val（））；
});
$（“#更改”）。单击（函数（）{
$input.val（$input.val（）+'x'）。触发器（“更改”）；
});


更改值



更改事件仅在输入模糊时触发。
有一些方法可以实现它。在这里，您可以使用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>




或者这个jQuery，
input
thing（与上面的示例相关）



您还可以使用javascript
setInterval（）
，它以给定的间隔时间持续运行。如果你在做与时间相关的课程，这只是可选的，也是最好的


简单解决方案：

调用
val（）后触发
input
：



var$input=$（“#myinput”）；
$input.on（'input'，function（）{
警报（$（this.val（））；
});
$（“#更改”）。单击（函数（）{
//更改值和触发器输入
$input.val（$input.val（）+'x'）.trigger（“input”）；
});



更改值
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>


下面是一个使用代理函数的版本：


$("#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>




测试材料
更改值
$.fn.changeTextField=函数（值）{
返回$（this）.val（value）.trigger（“更改”）；
}
$（文档）.ready（函数（）{
var$input=$（“#myInput”）；
$input.on（“更改”，函数（）{
警报（$input.val（））；
});
$（“#myButton”）。单击（函数（）{
$（“#myInput”）.changeTextField（“foo”）；
});
});


作为参考，这里确实已经回答了这个问题：


这里：


var$input=$（'#myinput'）；
$input.on（'input'，function（）{
//当值更改时执行此操作
警报（$input.val（））；
});
$（“#更改”）。单击（函数（）{
//更改值
$input.val（$input.val（）+'x'）；
});


更改值

触发器对无效。创建一个事件并使用本机JavaScript进行调度就完成了这项工作

资料来源：



$.fn.changeTextField=函数（值）{
返回$（this）.val（value）.dispatchEvent（新事件（“输入”，{bubbles:true}）；
}
$（文档）.ready（函数（）{
var$input=$（“#myInput”）；
$input.on（“更改”，函数（）{
警报（$input.val（））；
});
$（“#myButton”）。单击（函数（）{
$（“#myInput”）.changeTextField（“foo”）；
});
});

我认为OP不想通过编程方式触发更改的输入。我认为他想在上面设置一个观察者，因此，如果任何人在任何地方更改输入，OP的警报将被触发一些只使用JQUERY和/或vanilla javascript的内容。而不是另一个具有双向数据绑定的第三方框架。这样的事件
输入
不存在t、 尝试
keypup
keypdown
事件如果使用
change
而不是
input
，则
change
将不会触发，直到
#myInput
失去焦点。如果您希望在单击按钮时触发事件，则会取消焦点（或模糊）
#myInput
和
更改
事件将在
#myInput
的上下文中触发@Duncan嗨，我真的不知道你的问题为什么会得到否定票。我想可能是因为这个主题已经讨论了很多次，但我相信你的情况很特殊，因为你不能使用标准解决方案。底线是你r问题很好，不要太在意否决票。无论如何，我真的很想知道你不想触发
输入
或
更改
事件的原因。是因为它不仅仅是自动的，还是你在这个解决方案上有其他问题？谢谢you@JaqenH谢谢你的评论。我想自动检查是因为我有很多输入字段和许多不同的地方，我可以通过编程更改这些输入。我可以通过所有代码在任何地方添加
触发器
，但如果有办法不必这样做，我会节省很多时间。除此之外，我只对解决方案p感兴趣大家可能会想到。哈哈，我不知道为什么这个问题会有这么多负面的声音，嘿@Duncan，我只是发现你的代码中缺少了一些东西（可能是你的代码不起作用的原因）。在
$（'#change'）。单击（function（）{…}）
，你就忘了
$input.val（$input.val（）之后的
）+'x'）
a大多数分号都是可选的吗？不过在每个语句后都使用分号是个好主意。这是我见过的最好的解决方案。我从来没有想到过

var input = $("#myinput");

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

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



$input.trigger("input");



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



$("#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>



 <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>