Question

我正在为我的电子商务创建一个百分比计算脚本，但我遇到了问题。

当我在字段中写下百分比时，我希望实时更新价格。

所以我做了这个：

<input type="text" name="cost" onchange="disc()">

<input type="text" name="discount" id="prized" onchange="updateInput()">

<input type="text" name="price" value="">

<script>
function updateInput(){

  var discount = document.getElementsByName("discount")[0].value;
  var cost = document.getElementsByName("cost")[0].value;
  document.getElementsByName("price")[0].value = cost - (cost * (discount / 100)); 

}

function disc(){

    if($("#prized").val().length > 1) {

        var discount = document.getElementsByName("discount")[0].value;
        var cost = document.getElementsByName("cost")[0].value;
        document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));

    }
}
<script>

但它不能像我想的那样工作......

它不会实时更新，因为＆＃34; onchange＆＃34;。

所以我做了一些研究，发现了一个有趣的功能：.keydown()

我不知道如何在我的剧本中使用它。

有人可以帮我实现目标吗？

Answer 1

按onchange更改oninput应该会为您提供所需的行为，以下代码段适用于我：

function updateInput() {
  var discount = document.getElementsByName("discount")[0].value;
  var cost = document.getElementsByName("cost")[0].value;
  document.getElementsByName("price")[0].value = cost - (cost * (discount / 100)); 
}

function disc() {
	console.log(document.getElementsByName("discount")[0].value);

	if($("#prized").val().length > 1) {

		var discount = document.getElementsByName("discount")[0].value;
		var cost = document.getElementsByName("cost")[0].value;
		document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="cost" oninput="disc()"> <br><br>

<input type="text" name="discount" id="prized" oninput="updateInput()">

<input type="text" name="price" value="">

Answer 2

一些事情：使用jQuery时不需要使用getElementBy *，不需要两次编写相同的函数。

在两个字段的input（而不是更改或加密）上，运行函数

$(function(){
    $('#prized, #cost').on('input', function(){
    var discount = $('#prized').val();
    var cost = $('#cost').val();
    var price = cost - (cost * (discount / 100));
    $('#price').val(price);
  })
});

https://jsfiddle.net/popnoodles/npgvmLkc/2/

Answer 3

我在这里看到2个错误：

首先，您不是要将输入字段的值转换为数字;为此使用parseInt（）。

其次，使用'type =“number”'声明您的号码输入。正如您将看到的那样，这增加了可用性。

回答你的问题：如果你在updateInput（）中使用parseInt（）并使用onkeyup="updateInput"（甚至更好onkeypress="updateInput()"，这应该可行。请参阅此jsfiddle：http://jsfiddle.net/da5d92bk/

Answer 4

 $("input[name='discount']").bind('input propertychange', function() {
    //do your update here
}

Answer 5

尝试使用如下的keyup监听器。

$(document).ready(function() {
 var copyField = $('#copyvalue');  //field where you want to copy

$('input[type="text"]').keyup(function() {
    if($(this).val() != '') {
       copyField.val($(this).val());
    }
  });
});

Answer 6

$（'＃idofelement'）。keydown（function（）{ ... }）;

使用jQuery实时更新输入

6 个答案: