javascript-在文本输入区域中创建双向更新

这可能很简单，但我似乎在不断减少的圈子里到处跑

我正在为我们的工资区开发一个网页

问：是否有可能有两个文本输入字段，它们会自动相互更新，并在两个方向上工作。i、 一个将根据输入更新另一个，反之亦然

我在这里追求的是

员工当前工资输入到文本输入中

然后，工资单可以将数据输入两个文本输入之一（新工资或百分比增加）

输入新薪资将自动更新增加百分比或 输入加薪百分比将自动更新新薪资字段

整个想法是允许工资单使用百分比或实际工资 提出新的数字

谢谢

---

Frankie G

这是一个非常基本的实现，没有验证输入的值是否为数字：

window.onload = function() {    
    var currentSal = document.getElementById("current"),
        percentInc = document.getElementById("percent"),
        newSal = document.getElementById("new");

    percentInc.onkeyup = function() {
        newSal.value = currentSal.value * (1 + percentInc.value / 100);
    };
    newSal.onkeyup = function() {
        percentInc.value = (newSal.value - currentSal.value) / currentSal.value * 100;
    };    
};​

这假设您的html标记使用元素ID“current”、“percent”和“new”，但显然您可以更改这些ID。在“百分比增加”或“新薪资”字段中的任何关键点上，只需进行适当的计算并更新其他字段。整个过程都是在页面的onload事件中进行的，这样

document.getElementById（）

就可以找到元素——您可以将它放在页面末尾的脚本块中（尽管将所有元素都包含在这样的函数中会将变量排除在全局范围之外）

---

演示：

您必须实现onChange方法或onkeyup

这两种方法都是可用的，尽管当用户离开字段并更改输入时会触发onChange，而当您释放按下的键时（也就是说，如果您按住按钮，则只有在释放后才会触发onkeyup）

在该函数中，您可以执行以下操作

function salEntered(sal)
{
    document.getElementById("#perc").value = (document.getElementById("#origSal").value / sal )* 100;
}

function percEntered(perc){
    var new_sal = document.getElementById("#origSal").value * ( 1+ perc/100);
    document.getElementById("newSal").value = new_sal;
}

并将它们绑定到其中一个命名事件。 我把perc作为一个完整的十进制表示法

使用以下方式绑定它们：

<input type="text" id="newSal" onChange="salEntered(document.getElementById('newSal').value)" />

或是开玩笑

无法测试，稍后我醒来时会做

---

错的时候，纠正我。使用var关键字将变量保持在正确的范围内，即函数

如果一个人（意外或其他）在这两个字段中输入数据，那么哪个字段应该赢呢？“我似乎在不断减少的圆圈中跑着”-所以你一定离答案越来越近了。是的，这是可能的。你想在每次按键时更新，还是在焦点离开每个字段时更新，或者…？@nnnnnn当我开始在我的键盘上打字时，你的答案还不在这里。在iPhone上用diff字典输入这些东西比用英语输入要慢：-）是的，我偶尔会在智能手机上发布一个答案，当试图输入代码时，这是非常令人沮丧的。请注意，您的语句“and onChange，嗯，当它更改时，例如在击键时”并不完全正确：更改事件不会在每次击键时发生，而是在离开字段时触发（如blur，但仅当进行了更改时）。另外，

function

、

document

和

var

都需要以小写字母开头，不过我敢打赌你知道，是你的手机让它们变成了大写…@nnnnnn确实，更改了大写字母，谢谢。也改变了事件。谢谢你指出！。