如果输入的值大于 {number} 则设置值

Question

我有一个块，我希望用户通过在输入中输入一个值来设置它的宽度和高度。

我也希望输入的值不超过一定数量。好像我无法让 parseInt 工作..

if (parseInt($("#stwidth").val(), 10) > 113) {
  $("#stwidth").val("113");
}

if (parseInt($("#stwidth").val(), 10) > 62) {
 $("#stheight").val("62");
  
}

$("#stwidth, #stheight").keyup(function () {
  $('.preview').css({width: $("#stwidth").val() + "mm", height: $("#stheight").val() + "mm"});
});

.preview {
    width: 55mm;
    height: 19mm;
    background: #fff;
    overflow: hidden;
    border: 2px solid #3e6eb0;
    margin: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x 
<input type="text" name="stheight" id="stheight"  value="19" maxlength="2"> 

<div class="preview"></div>

Answer 1

您缺少的是在这些用户输入的文档加载上使用 Jquery keyup 事件处理程序。在这里我给出一个可行的解决方案，它不允许宽度大于113和高度大于62：

<html>

<head>
    <style>
        .preview {
            width: 55mm;
            height: 19mm;
            background: #fff;
            overflow: hidden;
            border: 2px solid #3e6eb0;
            margin: 50px 0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#stwidth").keyup(function() {
                if (parseInt($("#stwidth").val(), 10) > 113) {
                    $("#stwidth").val("113");
                }
            });

            $("#stheight").keyup(function() {
                if (parseInt($("#stheight").val(), 10) > 62) {
                    $("#stheight").val("62");

                }
            });

            $("#stwidth, #stheight").keyup(function() {
                $('.preview').css({
                    width: $("#stwidth").val() + "mm",
                    height: $("#stheight").val() + "mm"
                });
            });
        });
    </script>
</head>

<body>
</body>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x
<input type="text" name="stheight" id="stheight" value="19" maxlength="2">

<div class="preview"></div>

</html>

Answer 2

$("#stwidth, #stheight").keyup(function () {
  if (parseInt($("#stwidth").val(), 10) > 113) {
    $("#stwidth").val("113");
  }
  if (parseInt($("#stheight").val(), 10) > 62) {
 $("#stheight").val("62");
  }
  $('.preview').css({width: $("#stwidth").val() + "mm", height: $("#stheight").val() + "mm"});
});

.preview {
    width: 55mm;
    height: 19mm;
    background: #fff;
    overflow: hidden;
    border: 2px solid #3e6eb0;
    margin: 50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="55" maxlength="3"> x 
<input type="text" name="stheight" id="stheight"  value="19" maxlength="2"> 

<div class="preview"></div>

问题出在您的 if 条件上。它脱离了 keyup 函数，因此它只会渲染一次。但是现在每次用户按下键时它都会渲染

如果输入的值大于 {number} 则设置值

Set value if entered value is more than a {number}

jquery

parseint