Jquery约束比例，宽度和高度输入字段

Question

我有一个带有宽度和高度输入字段的表单。 我想听听用户在任何一个字段中所做的更改 并使用Jquery更改其他字段中的值wile约束比例。 用户可以看到他的典型变化。

<form>
  <p>
    <label>Width</label><br />
    <input type="text" id="width" value="16" />
  </p>
  <p>
    <label>Height</label>
    <input type="text" id="height" value="9" />
  </p>
</form>

Answer 1

这个怎么样？我将原始值存储在data-value属性中，我用它来重新计算比率

<form>
   <p>
      <label>Width</label><br />
      <input type="text" id="width" data-value="16" value="16" />
  </p>
  <p>
      <label>Height</label>
      <input type="text" id="height" data-value="9" value="9" />
  </p>
</form>​​​​​​​​​

这是改变宽度的监听器（你可以用同样的方式写一个高度）

​$("#width").bind("keyup", function(){
   var width = $(this).data("value")
     , newwidth = $(this).val()
     , $height = $("#height")
     , height = $height.val();

   $height.val(height*(newwidth/width));

})​

以下是fiddle

Answer 2

尝试将一个事件附加到.keypress（处理程序（eventObject）），对于每个按键使用它执行上述操作。