Устанавливает значение, если введенное значение больше, чем {число}

У меня есть блок, ширина и высота которого я хочу установить пользователем, введя значение на входе.Устанавливает значение, если введенное значение больше, чем {число}

Я также хочу, чтобы значение входов не превышало определенное число. Похоже, я не могу получить parseInt работать ..

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>

источник

2017-01-01 Azamat Safarov

Ваш вопрос немного неясен, чего вы пытаетесь достичь? Вы используете '# stwidth' во втором операторе if вместо' # stheight'. Итак, 'parseInt ($ (" # stwidth "). Val(), 10)> 62' должен быть' parseInt ($ ("# stheight"). Val(), 10)> 62' Верю. – Ionut

Спасибо. это просто опечатка .. –

Что вы пропустили использует Jquery KeyUp обработчик событий на документе OnLoad для этих данных, вводимых пользователем. Здесь я даю рабочий раствор, он не будет позволять ширина быть больше, чем 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>

источник

2017-01-01 12:41:37

Какой позор ... –

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

Проблема была с вашей если условия. Он вышел из функции keyup, так что он будет отображаться только один раз. Но теперь он будет отображаться каждый раз, когда пользователь нажимает клавишу

источник

2017-01-01 13:25:31 Advaith

Ницца. И тебе спасибо. –

@ АзаматСафаров Добро пожаловать. Если вам нравится этот пост, пожалуйста, примите это как лучший ответ. :) – Advaith

Устанавливает значение, если введенное значение больше, чем {число}

ответ

Смежные вопросы