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

【问题标题】：Set value if entered value is more than a {number}如果输入的值大于 {number}，则设置值
【发布时间】：2017-01-01 12:15:45
【问题描述】：

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

我还希望输入的值不超过某个数字。好像我无法让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>

【问题讨论】：

你的问题有点不清楚，你想达到什么目的？在第二个 if 语句中使用 #stwidth 而不是 #stheight。所以parseInt($("#stwidth").val(), 10) > 62 应该是parseInt($("#stheight").val(), 10) > 62 我相信。
谢谢。这只是一个错字..

标签： jquery parseint

【解决方案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>

【讨论】：

真可惜...?

【解决方案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 功能中，所以它只会渲染一次。但是现在每次用户按键都会渲染

【讨论】：

不错。也谢谢你。
@AzamatSafarov 欢迎。如果你喜欢这篇文章，请接受这个作为最佳答案。 :)