Question

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

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

Q值。是否可以有两个文本输入字段自动更新，并且可以在两个方向上工作。即一个将更新另一个，反之亦然，具体取决于输入

我在这之后......

员工当前薪水输入文本输入

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

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

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

由于 Frankie G

Answer 1

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

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标记使用元素ids“current”，“percent”和“new”，但显然您可以更改这些。在百分比增加或新工资字段中的任何关键字上，只需进行适当的计算并更新其他字段。整个事情是在页面的onload事件中，以便document.getElementById()可以找到元素 - 相反，你可以把它放在页面末尾的一个脚本块中（虽然所有包含在这样的函数中）使变量远离全局范围。）

演示：http://jsfiddle.net/5pDdM/

Answer 2

您必须实现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关键字将变量保持在正确的范围内，作为函数。

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

2 个答案: