javascript - jquery 不允许两个的乘积大于

Question

Jsfiddel链接:https://jsfiddle.net/d6uarv9h/9/

我有两个输入框长度和宽度，它们用于根据它们的比例计算面积，效果很好。

我希望该面积(= 长度 * 宽度)不超过 1000。

我无法做到这一点，下面是我的代码:

一旦面积超过 1000，我就能够显示警告，但不得允许用户输入使面积超过 1000 的金额

var sizeheight = "1";
var sizewidth ="1.61";

jQuery("#sizewidth").on("input propertychange paste", function() {
    jQuery('#sizeheight').val(((jQuery('#sizewidth').val()*sizeheight)/sizewidth).toFixed(2));
    jQuery('#finalsize').html(jQuery("#sizewidth").val()+" * "+jQuery("#sizeheight").val()+ " inches");
});


jQuery("#sizeheight").on("input propertychange paste", function() {
    jQuery('#sizewidth').val(((sizewidth/sizeheight)*jQuery('#sizeheight').val()).toFixed(2));
    jQuery('#finalsize').html(jQuery("#sizewidth").val()+" * "+jQuery("#sizeheight").val()+ " inches");
});	





$('#sizewidth,#sizeheight').on('keyup', function(e) {
var myfinalarea = parseFloat(jQuery('#sizewidth').val())*parseFloat(jQuery('#sizeheight').val());
  if (myfinalarea > 1000){
   jQuery('#warning').show();
    /* to add code here */
  }else{ jQuery('#warning').hide(); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="sizewidth" value="1.61">
<input type="text" id="sizeheight" value="1">

<span id="finalsize">1.61*1</span>

<span id="warning" style="display:none">area should be less that 1000</span>

Answer 1

您可以看看this article .

因此，在输入事件监听器中，完成计算后，您意识到总大小大于您的限制，您可以使用 event.preventDefault 来阻止更改发生。