JQuery：如何使两个文本输入相互影响？答案

【问题标题】：JQuery: How can I Make Two Text Inputs Effect Each Other?JQuery：如何使两个文本输入相互影响？
【发布时间】：2014-08-04 21:37:29
【问题描述】：

Pixels <input type="text" name="mytext[]" id="Pixels" value="Text 1"></input>
    <br />
    Percentage <input type="text" name="mytext[]" id="Percentage" value="Text 1"></input>

在第一个输入中输入 10，在第二个输入中，我如何回显这个 *2 和另一个输入 /2 在字段中输入内容时。

【问题讨论】：

你有没有尝试过？这可能是开始stackoverflow.com/questions/4088467/get-value-in-input-text-box 的好方法
什么是 var X？百分比是多少？
Var X 是一个变量，它将在以后设置@shaunakde，只要我可以让两个字段在另一个被编辑时显示一些东西，我知道如何进行所涉及的数学运算，所以我真的应该问那个问题...
input 元素是void elements，因此它们没有结束标记。您可以使用<input> 或<input />

标签： javascript jquery html dom-manipulation

【解决方案1】：

Demo Fiddle：百分比，

var X = 80;
$('#Pixels').keyup(function(){

    if(!isNaN(this.value)){
       $('#Percentage').val(parseInt(this.value)/X *100)
    }
});

$('#Percentage').keyup(function(){
    $('#Pixels').val(parseInt(this.value) * X/100);

});

使用.val() 或.value 获取文本框中的值。
.keyup() 或 .change() 是获取值的事件。
还有更多选择jQuery Events

【讨论】：

这是完美的@shaunakde，我进行了编辑以使其更具体，所以这并不意味着我直接要求完成我的原件，但您必须在编辑之前看到并为我的网站。谢谢:) +1
很高兴帮助@TimMarshall

【解决方案2】：

var X = 100;

var inp1 = document.getElementById('Pixels'),
    inp2 = document.getElementById('Percentage');

inp1.onchange = function() {
    var num = this.value = Math.max(Math.min(this.value, X), 0);
    inp2.value = num / X * 100;
};
inp2.onchange = function() {
    var num = this.value = Math.max(Math.min(this.value, 100), 0);
    inp1.value = num * X / 100;
};

【讨论】：

谢谢@Oriol，另一个完美的答案:) +1
我以前从未使用过数字的输入类型，这只是让它变得更好！谢谢！
@TimMarshall HTML5 改进了很多表单 :)