如何使用任何键事件自动显示jquery函数结果

Question

以下jquery代码运行正常，但按“计算百分比”按钮后计算百分比。我希望它修改当用户输入第二个数字并按Tab键时，结果将自动显示在第三列。

function ShowPercentage() {

  var $inputs = $('input');

  // get values
  var firstNumVal = $inputs.eq(0).val();
  var SecondNumVal = $inputs.eq(1).val();

  // compute something
  var percentVal = (firstNumVal / SecondNumVal) * 100;

  // set value
  $inputs.eq(2).val(parseInt(percentVal) + '%');
}

$(document).ready(function() {
  $('#computeSomething').on('keypress', ShowPercentage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
myfirstnumber
<input type="number" value="F" class="1" id="myfirstnumber"> <br> mysecondnumber
<input type="number" value="S" class="1" id="mysecondnumber"> <br> mypercenttextbox
<input type="percentage" value="P" class="1" id="mypercenttextbox "><br>
<button id="computeSomething">Compute Percentage!</button>

Answer 1

将change事件处理程序绑定到第二个输入#mysecondnumber元素

$('#mysecondnumber').on('change', ShowPercentage);

function ShowPercentage() {

  var $inputs = $('input');

  // get values
  var firstNumVal = $inputs.eq(0).val();
  var SecondNumVal = $inputs.eq(1).val();

  // compute something
  var percentVal = (firstNumVal / SecondNumVal) * 100;

  // set value
  $inputs.eq(2).val(parseInt(percentVal) + '%');
}

$(document).ready(function() {
  $('#computeSomething').on('keypress', ShowPercentage);
  $('#mysecondnumber').on('change', ShowPercentage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
myfirstnumber
<input type="number" value="F" class="1" id="myfirstnumber"> <br> mysecondnumber
<input type="number" value="S" class="1" id="mysecondnumber"> <br> mypercenttextbox
<input type="percentage" value="P" class="1" id="mypercenttextbox "><br>
<button id="computeSomething">Compute Percentage!</button>

制作第二个文本框，readonly并将值设置为20

$(document).ready(function() {

  var $inputs = $('input');
  $('#mysecondnumber').val(20).prop('readonly', true).prop('disabled', true);

  function ShowPercentage() {
    // get values
    var firstNumVal = $inputs.eq(0).val();
    var SecondNumVal = $inputs.eq(1).val();

    // compute something
    var percentVal = (firstNumVal / SecondNumVal) * 100;

    // set value
    $inputs.eq(2).val(parseInt(percentVal) + '%');
  }

  $('#computeSomething').on('keypress', ShowPercentage);
  $('#myfirstnumber').on('change', ShowPercentage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
myfirstnumber
<input type="number" value="F" class="1" id="myfirstnumber"> <br> mysecondnumber
<input type="number" value="S" class="1" id="mysecondnumber"> <br> mypercenttextbox
<input type="percentage" value="P" class="1" id="mypercenttextbox "><br>
<button id="computeSomething">Compute Percentage!</button>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" value="F" class="1" id="myfirstnumber"> <br>

<input type="number" value="S" class="1" id="mysecondnumber"> <br>

<input type="percentage" value="P" class="1" id="mypercenttextbox "><br>
<button id="computeSomething">Compute Percentage!</button>
<script>
function ShowPercentage() {

    var $inputs = $('input');

    // get values
    var firstNumVal = $inputs.eq(0).val();
    var SecondNumVal = $inputs.eq(1).val(20).prop('readonly', true);

    // compute something
    var percentVal = (firstNumVal / SecondNumVal) * 100;

    // set value
    $inputs.eq(2).val(parseInt(percentVal) + '%').prop('readonly', true);

}

$(document).ready(function() {
  $('#mysecondnumber').on('change blur', ShowPercentage);
});