2017-01-01 6 views
1

入力に値を入力してブロック、幅、高さを設定します。入力値が{数字}より大きい場合の値を設定します

また、入力の値が特定の数を超えないようにしたいと考えています。私はparseIntが仕事を得ることができないようにあなたがそれらのユーザ入力のためのドキュメントのonload上のjQueryからkeyupイベントハンドラを使用していた行方不明何

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

 
if (parseInt($("#stwidth").val(), 10) > 62) { 
 
\t $("#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>

+0

あなたの質問は少し不明です、あなたは何を達成しようとしていますか? 2番目のif文で '#stheight'の代わりに'#stwidth'を使います。したがって、parseInt($( "#stwidth")。val()、10)> 62は 'parseInt($("#stheight ") – Ionut

+0

ありがとうございます。それはちょうどタイプミスです。 –

答えて

0

...そうです。ここで私はそれが幅が62より大きくなるように113と高さよりも大きくすることはできませよ、ワーキング溶液を与えている:

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

どのような수치... –

0

$("#stwidth, #stheight").keyup(function() { 
 
    if (parseInt($("#stwidth").val(), 10) > 113) { 
 
    $("#stwidth").val("113"); 
 
    } 
 
    if (parseInt($("#stheight").val(), 10) > 62) { 
 
\t $("#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>

問題があなたとありました条件の場合。キーアップ機能から外れていたため、1回のみレンダリングされます。しかし、今は、ユーザーがキーを押すたびにレンダリングされます

+0

ニース。あなたもありがとう。 –

+0

@AzamatSafarovようこそ。この投稿が好きなら、これを最善の答えとして受け入れてください。 :) – Advaith

関連する問題