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

Creating bidirectional update in text entry areas

本文关键字：更新 创建 文本 输入 区域      更新时间：2023-09-26

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

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

Q。是否可以有两个文本输入字段，它们会自动更新并双向工作。即一个将更新另一个，反之亦然，这取决于输入

我在这里追求的。。。

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

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

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

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

谢谢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"answers"new"，但显然您可以更改这些。在百分比增长或新薪资字段中的任何关键字设置上，只需进行适当的计算并更新其他字段即可。整件事都在页面的onload事件中，这样document.getElementById()就可以找到元素——相反，你可以把它放在页面末尾的脚本块中（尽管所有元素都包含在这样的函数中，使变量不在全局范围内）。

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

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

相关文章：