jQuery约束比例与宽度和高度输入字段

Question

I have a form with width and height input fields. I want to listen to changes made in any one of the fields by the user and change the value in the other field wile constraint proportions using Jquery. the user can see the changes as he typs.

<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

How about this. I am storing the original value in data-value attribute, that I use to recount the ratio

<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>​​​​​​​​​

Here is the listener for changing width (you can write the one for height in the same way)

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

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

})​

Here is the fiddle

Answer 2

尝试在.keypress（handler（eventObject））上附加一个事件，该事件对于所使用的每次按键都会执行您上面所说的操作。