<input type=“number”>似乎不适用于大数字

<input type="number"> doesn't seem to work with large numbers

本文关键字：不适用 适用于 数字 number input type      更新时间：2023-09-26

有这段代码：

  <form id="filterprice" method=get onsubmit="window.location = 'catalog/{$category->url}{if $brand}/{$brand->url}{/if}?price_min='+price_min.value+'&price_max='+price_max.value;return false;">
    <input type="number" id="price_min" name="price_min" min="0" onchange="check_min()" value={$price_min}> - <input type="number" id="price_max" name="price_max" min={$price_min} value={$price_max}>
    <input type="submit" value="Подобрать">
  </form>
<script>
  function check_min() {
  document.getElementById('price_max').min=document.getElementById('price_min').value;
    if(document.getElementById('price_max').min > document.getElementById('price_max').value) {
      document.getElementById('price_max').value=document.getElementById('price_max').min;
    }
  }
</script>

即我在"price_min"中有值 40000，在"price_max"中有值 40001000。每当我更改最后一个属性时，脚本都会将"price_max"的"min"属性设置为当前值"price_min"。因此，如果我将"price_min"更改为 40002，"price_max"的"min"属性设置为 40002。但它也将当前值"price_max"设置为 40002。似乎它只是"price_max"的 3 位数字。更不用说这些<input>标签的"value"属性不会改变，即使我可以在页面上更改它们。所以问题是：<input type="number">的价值有什么限制吗？为什么当涉及到大数字时它工作不正确？有什么解决办法吗？

问题是大于检查的是字符串而不是数字。所以你需要把它们转换成数字。

function check_min() {
  document.getElementById('price_max').min = document.getElementById('price_min').value;
  
  
  if (Number(document.getElementById('price_max').min) > Number(document.getElementById('price_max').value)) {
    document.getElementById('price_max').value = document.getElementById('price_max').min;
  }
}
<form id="filterprice" method=get>
  <input type="number" id="price_min" name="price_min" min="0" onchange="check_min()" value="123">-
  <input type="number" id="price_max" name="price_max" value="40001000">
  <input type="submit" value="Подобрать">
</form>

看起来你从.min和/或.value得到的值是字符串，来自"40000"和"40001000"的词法比较使"40000"变得更大。

只需使用if(parseInt(document.getElementById('price_max').min) > parseInt(document.getElementById('price_max').value).)

通过为"price_min"和"price_max"提供默认值，代码可以正常工作。

相关文章：