3

これが私のフィドルです

http://jsfiddle.net/YFgkB/6/

 <input type="text" name="input1" id="input1" value="5">
 <input type="text" name="input2" id="input2" value="">
 <a href="javascript: void(0)" onClick="calc()">Calculate</a>
 <input type="text" name="output" id="output" value="">

Javascript

 function calc(){
   var textValue1 = document.getElementById('input1').value;
   var textValue2 = document.getElementById('input2').value;

   document.getElementById('output').value = textValue1 * textValue2; 
 }

ここで、計算リンクをクリックするとすべてが正常に機能し、テキスト入力数値の両方が乗算され、3 番目のボックスに結果が表示されますが、リンク計算で自動乗算する必要があります。

つまり、ユーザーは 2 番目のテキスト ボックスに値を入力できるため、自動的に乗算され、ボタンなしで 3 番目のテキスト ボックスに結果が表示されます。

4

6 に答える 6

11

ワーキングデモ

これを試して

$("#input2,#input1").keyup(function () {
    $('#output').val($('#input1').val() * $('#input2').val());
});
于 2013-10-31T06:25:34.157 に答える
6

要素onkeyup="calc()"での使用input

<input type="text" name="input1" id="input1" onkeyup="calc()"value="5">
<input type="text" name="input2" id="input2" onkeyup="calc()" value="">

Fiddle DEMO

于 2013-10-31T06:20:11.103 に答える
2

jqueryを使って..

これを試して

 $('#input1,#input2').keyup(function(){
     var textValue1 =$('#input1').val();
     var textValue2 = $('#input2').val();

    $('#output').val(textValue1 * textValue2); 
 });
于 2013-10-31T06:23:10.063 に答える
2

イベントでcalc()関数を呼び出すことができますblur

デモ

function calc(){
   var textValue1 = document.getElementById('input1').value;
   var textValue2 = document.getElementById('input2').value;

   if($.trim(textValue1) != '' && $.trim(textValue2) != ''){
      document.getElementById('output').value = textValue1 * textValue2; 
    }
}

$(function(){
   $('#input1, #input2').blur(calc);
});
于 2013-10-31T06:22:25.617 に答える
1

これを試して：

 <input type="text" name="input2" id="input2" value="" onchange="calc()">

空白値などのチェックを追加することができます。

于 2013-10-31T06:20:48.850 に答える