时间戳

首页 > 解决方案 > 文本框上的 Jquery 更改事件

javascript - 文本框上的 Jquery 更改事件

问题描述

基本上，当 textbox1 的值被按钮功能更改时，我想更改文本框 2 的值。我知道可以在按钮上包含该函数来更改 textbox2 上的值，但我不希望这样。是否可以？

这是我到目前为止在 JSFiddle https://jsfiddle.net/xpvt214o/387300/上尝试的内容

HTML 代码：

<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

JavaScript：

jQuery('#button1').on('click', function() {
    document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) +1;
});


jQuery('#outputtext1').on('change', function() {
    //I know that this logic can be put in onClick function above instead
    var number = document.getElementById("outputtext1").value;
    if( number <= 3){
        document.getElementById("outputtext2").value = "low";
    } else if (number < 10){
        document.getElementById("outputtext2").value = "medium";
    } else if (number >= 10){
        document.getElementById("outputtext2").value = "high";
    }
});

先感谢您！

标签： javascriptjquery

解决方案

您可以jQuery('#outputtext1').trigger("change");在button元素click事件中使用。

例子：

jQuery('#button1').on('click', function() {
  document.getElementById("outputtext1").value = parseInt(document.getElementById("outputtext1").value) + 1;
  jQuery('#outputtext1').trigger("change");
});


jQuery('#outputtext1').on('change', function() {
  var number = document.getElementById("outputtext1").value;
  if (number <= 3) {
    document.getElementById("outputtext2").value = "low";
  } else if (number < 10) {
    document.getElementById("outputtext2").value = "medium";
  } else if (number >= 10) {
    document.getElementById("outputtext2").value = "high";
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">button</button>
<input type="text" id="outputtext1" value="1" readonly/>
<input type="text" id="outputtext2" value="" />

推荐阅读