Блог

Главная - Вопросы по программированию - Атрибуты игнорируются для в Html 5

Атрибуты игнорируются для в Html 5

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я тестировал это в Chrome, opera и Microsoft Edge, но все еще атрибуты, кроме значения и имени, игнорируются.

 <input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />

Короче говоря, мои кнопки увеличения и уменьшения обходят ограничение Вот весь HTML-код

 <div class="quantity ml-auto">
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
  <div class="input-group-button">
    <span class="input-number-increment"> </span>
  </div>
</div>
</div>

И я также использую Jquery. Если я удалю этот скрипт, атрибуты будут работать отлично. Возможно, проблема в этом скрипте.

 <script>
    $('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val   1);

});

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(),  10);
  $input.val(val - 1);

});


</script>

Комментарии:

1. Каким образом это не работает? Я бы предположил, что ваши кнопки увеличения / уменьшения могут обойти ограничения; если это так, вам нужно переработать свой JS для обработки этого сценария.

2. Да, я пробовал это, но не смог найти способ сделать это. Вот почему я добавил сюда вопрос.

3. Ваш JS-код не проверяет наличие атрибутов, а просто увеличивает значение, и поскольку вы можете ввести недопустимое значение — никаких проблем для JS

4. @AhmarAamir Вам нужно проверить, каким будет значение при увеличении / уменьшении, и проверить это на соответствие вашим ограничениям.

Ответ №1:

Наконец, я получил свой ответ. Вот окончательный код.

HTML-код

 <div class="quantity ml-auto">
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input type="number" class="input-number" min="1" max="10" maxlength="2" step="1" value="<?php echo $_SESSION['cart'][$row['id']]['quantity']; ?>" name="quantity[<?php echo $row['id']; ?>]" />
  <div class="input-group-button">
    <span class="input-number-increment"> </span>
  </div>
</div>
</div>

CSS

 input-number-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.input-number-group input[type=number]::-webkit-inner-spin-button,
.input-number-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.input-number-group .input-group-button {
  line-height: calc(80px/2 - 5px);
}

.input-number-group .input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
  display: block;
  margin: 0;
}

.input-number-group .input-number,
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  border: 1px solid #cacaca;
  height: 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0;
}

.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  display: inline-block;
  width: 40px;
  background: #e6e6e6;
  color: #0a0a0a;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 400;
}

.input-number-group .input-number-decrement {
  margin-right: 0.3rem;
}

.input-number-group .input-number-increment {
  margin-left: 0.3rem;
}

Окончательный сценарий

 <script>
    $(document).ready(function () {
  
  jQuery('.quantity').each(function () {
    var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.input-number-increment'),
        btnDown = spinner.find('.input-number-decrement'),
        min = input.attr('min'),
        max = input.attr('max');

    btnUp.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue >= max) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue   1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

    btnDown.click(function () {
      var oldValue = parseFloat(input.val());
      if (oldValue <= min) {
        var newVal = oldValue;
      } else {
        var newVal = oldValue - 1;
      }
      spinner.find("input").val(newVal);
      spinner.find("input").trigger("change");
    });

  });
});
</script>