javascript - 具有宽度和高度输入字段的 Jquery 约束比例

Question

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

<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));

})​

这是小提琴

Answer 2

尝试将事件附加到 .keypress( handler(eventObject) ) ，对于使用的每个按键，它都会执行您上面所说的操作。