如何在不单击按钮的情况下将两个值相乘 - javascript

时间:2013-10-31 06:18:40

标签: javascript jquery html

这是我的小提琴

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

这里一切正常,点击计算链接,它将两个文本输入数字相乘,并在第三个框中显示结果,但我需要它与链接计算自动乘法。

我的意思是用户可以在第二个文本框中输入一个值,这样它就可以自动进行多重拼接,并在没有任何按钮的情况下在第三个文本框中显示结果。

6 个答案:

答案 0 :(得分:8)

工作DEMO

试试这个

$("#input2,#input1").keyup(function () {
    $('#output').val($('#input1').val() * $('#input2').val());
});

答案 1 :(得分: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

答案 2 :(得分:2)

您可以在calc()事件

上调用blur功能

<强> DEMO

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

答案 3 :(得分:2)

使用jquery ..

试试这个

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

    $('#output').val(textValue1 * textValue2); 
 });

答案 4 :(得分:2)

DEMO

试试这个!

function add() {
  var x = parseInt(document.getElementById("a").value);
  var y = parseInt(document.getElementById("b").value)
  document.getElementById("c").value = x * y;
}
Enter 1st Number :
<input type="text" id="a">
<br>
<br>Enter 2nd Number :
<input type="text" id="b" onkeyup="add()">
<br>
<br>Result :
<input type="text" id="c">

答案 5 :(得分:1)

试试这个:

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

您可能需要添加空白值检查等。