一旦另一个文本框的值发生变化，如何立即更改一个文本框的值

Question

我正在制作一个包含三个文本框的 asp.net 网页。 让我们考虑 textbox1、textbox2、textbox3。现在，当我加载页面时，textbox1 的默认值为 10000。现在我想在 textbox2 中输入一个值。一旦我在 textbox2 中输入值，它应该会自动在 textbox3 中显示剩余的值。 例子： Textbox1 值的默认值为 10000。 当我在 textbox2 中输入 1500 时。 textbox3 的值应该是 8500。只要 textbox2 的值发生变化，它就会立即变化。无论 textbox2 的值是什么，它都应该从 textbox1 中减去，并且应该立即在 textbox3 上闪烁，而无需按下任何按钮。

Answer 1

有多种方法可以做到这一点，目前最简单的是 KnockoutJS

您可以将模型绑定到所有三个文本框。第三个框将绑定一个computed observable。

像这样：

假设您的 UI 代码如下所示：

<div id="application">
    <input type="text" data-bind="value: init1, valueUpdate='afterkeydown'" value="1000"/>
    <input type="text" data-bind="value: init2, valueUpdate='afterkeydown'"/>
    <input type="text" data-bind="value: computed"/>
</div>

JavaScript 代码如下所示：

$(function(){
    var ViewModel = new function(){
        this.init1 = ko.observable(1000);
        this.init2 = ko.observable(0);
        this.computed = ko.computed(function(){ 
            return this.init1() - this.init2();
        });
    };

    var vm = new ViewModel();
    ko.applyBindings(vm, document.getElementById('application');
});

你需要 jQuery 和 KnockoutJS 才能工作。