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

Question

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。

Answer 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

Answer 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;
};