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

您缺少的是在文档onload上为这些用户输入使用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

＆＃13;

$("#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"});
});

＆＃13;

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

＆＃13;

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

＆＃13;

问题出在你的if条件上。它不在keyup函数中，所以它只渲染一次。但现在每次用户按下键时都会呈现

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

2 个答案: