4

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

我正在为我们的工资单区域开发一个网页，并且...

问：是否可以让两个文本输入字段自动相互更新并双向工作。即一个将根据输入更新另一个，反之亦然

我在这里追求的是什么...

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

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

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

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

谢谢弗兰基 G

4

2 回答 2

2

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

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“当前”、“百分比”和“新”，但显然您可以更改这些。在百分比增加或新工资字段中的任何键上，只需进行适当的计算并更新其他字段。整个事情都在页面的 onload 事件中，以便document.getElementById()可以找到元素 - 您可以将其放在页面末尾的脚本块中（尽管所有内容都包含在这样的函数中，以防止变量全局范围）。

演示： http: //jsfiddle.net/5pD​​dM /

于 2012-08-28T22:28:36.407 回答
0

您必须实现 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)" />

或onkeyup。

不能测试，等我醒了再做。

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

于 2012-08-28T22:48:22.000 回答