如何使用 JavaScript 激活 onchange 功能？答案

【问题标题】：How to activate the onchange function with JavaScript?如何使用 JavaScript 激活 onchange 功能？
【发布时间】：2018-04-06 15:41:32
【问题描述】：

我正在使用 JSF 2.2 开发 Java Web 应用程序。我正在结合另一种前端技术，但是我的具体问题很容易用下一个代码来解释：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prueba</title>
  </head>
  <body>
    <input id="test" value="Initial value" onchange="alert('I changed my value')"/>
    <button onclick="updateTest()">Cambiar el valor</button>
    <script type="text/javascript">
        function updateTest() {
          document.getElementById("test").value = "|" + document.getElementById("test").value;
        }
    </script>
  </body>
</html>

当用户修改输入值时，浏览器显示警报消息，但是当用户单击按钮时，浏览器未检测到输入值被更改，我需要当用户单击按钮时，输入更改其值和浏览器启动警报消息。

为什么我需要这个疯狂的过程？因为我想使用另一个 JavaScript 框架，以不同的方式修改 JSF 的前端。我有一个模式可以用纯 javascript 框架代码更改输入值，我希望当这个值改变时，JSF 也检测到新的输入值。

非常感谢！

【问题讨论】：

这个问题与jsf有什么关系？

标签： javascript jquery html jsf jsf-2

【解决方案1】：

您可以分配一个输入事件侦听器，请参阅下面的代码 sn-p 以获得应该让您到达那里的基本示例。

编辑：这已更新以表明即使您以编程方式更改值，您也可以触发 oninput 事件侦听器。

document.querySelector('#test').oninput = function() {
  console.log(this.value);
}

// Modal code
{
  document.querySelector('#test').value = 'new value';
  document.querySelector('#test').oninput();
}

&lt;input id="test" type="text" /&gt;

【讨论】：