JavaScript输入类型编号检查输入是否为数字

发布于 2025-02-12 17:38:14 字数 1114 浏览 0 评论 0原文

大家好，我可以从1-100开始使用键盘将数字输入HTML号码字段。

我从此处获取了 html数字不起作用适当地，它适用于1-100之间的数字。

但是我仍然可以输入字母，我不知道该如何解决。我尝试添加，

if (typeof (parseInt(el.value)) != 'number') {
     el.value = el.min;
}

但它不起作用。这是我的整个代码：

const enforceMinMax = (el) => {
    if (el.value != "") {
        
        if (parseInt(el.value) < parseInt(el.min)) {
            el.value = el.min;
        }
        if (parseInt(el.value) > parseInt(el.max)) {
            el.value = el.max;
        }
        if (typeof (parseInt(el.value)) != 'number') {
            el.value = el.min;
        }
    }
}

<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" onkeyup=enforceMinMax(this) ><br /><br />

如何在HTML编号字段中停止使用键盘输入字母？

原文

Hey guys trying that I can just enter numbers with my keyboard into an html number field from 1-100.

I took the function from here HTML number input min and max not working properly and it worked properly for numbers between 1-100.

But I can still enter letters and I don't know how to solve it. I tried adding

if (typeof (parseInt(el.value)) != 'number') {
     el.value = el.min;
}

But it is not working. Here is my whole code:

const enforceMinMax = (el) => {
    if (el.value != "") {
        
        if (parseInt(el.value) < parseInt(el.min)) {
            el.value = el.min;
        }
        if (parseInt(el.value) > parseInt(el.max)) {
            el.value = el.max;
        }
        if (typeof (parseInt(el.value)) != 'number') {
            el.value = el.min;
        }
    }
}

<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" onkeyup=enforceMinMax(this) ><br /><br />

How can I stop entering letters with my keyboard in a html number field?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满意归宿 2025-02-19 17:38:14

您可以将相同的逻辑应用于每个具有分钟＆amp;的数字输入。像这样的最大属性：

// find all numeric inputs that have both min & max attributes
// and apply the event handler to each.

document.querySelectorAll('input[type="number"][min][max]').forEach(
  input => input.addEventListener('keyup', function(e) {
    // if the value is numeric proceed - test the numeric value of the input against the min/max attribute values.
    if( !isNaN( Number( this.value ) ) ) {
        if( Number( this.value ) > this.max )this.value=this.max;
        if( Number( this.value ) < this.min )this.value=this.min;
        return true;
      }
      e.preventDefault();
      return false;
    })
);

<input type="number" name="quantity" min="1" max="100" step="1" />

You could apply this same logic to every numeric input that has a min & max attribute like so:

// find all numeric inputs that have both min & max attributes
// and apply the event handler to each.

document.querySelectorAll('input[type="number"][min][max]').forEach(
  input => input.addEventListener('keyup', function(e) {
    // if the value is numeric proceed - test the numeric value of the input against the min/max attribute values.
    if( !isNaN( Number( this.value ) ) ) {
        if( Number( this.value ) > this.max )this.value=this.max;
        if( Number( this.value ) < this.min )this.value=this.min;
        return true;
      }
      e.preventDefault();
      return false;
    })
);

<input type="number" name="quantity" min="1" max="100" step="1" />

回复收藏 0 原文

玩心态 2025-02-19 17:38:14

您可以比较键代码并返回false如果键不是数字，那么在键上您可以验证最小值和最大值，因此可以修改输入的值

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script>
      function handleKeyDown(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
          e.preventDefault();
          return false;
        }
      }
      function handleKeyUp(e) {
        const v = e?.target?.value || 0;
        if (parseInt(v) === NaN || parseInt(v) < 1) {
          e.target.value = 1;
        } else if (parseInt(v) > 100) {
          e.target.value = 100;
        }
      }
    </script>
  </head>

  <body>
    <input
      type="number"
      min="1"
      max="100"
      onkeydown="handleKeyDown(event)"
      onkeyup="handleKeyUp(event)"
    />
  </body>
</html>

You can compare keyCode and return false if key is not a number, then on key up you can validate min and max value, accordingly modify value of input

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script>
      function handleKeyDown(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
          e.preventDefault();
          return false;
        }
      }
      function handleKeyUp(e) {
        const v = e?.target?.value || 0;
        if (parseInt(v) === NaN || parseInt(v) < 1) {
          e.target.value = 1;
        } else if (parseInt(v) > 100) {
          e.target.value = 100;
        }
      }
    </script>
  </head>

  <body>
    <input
      type="number"
      min="1"
      max="100"
      onkeydown="handleKeyDown(event)"
      onkeyup="handleKeyUp(event)"
    />
  </body>
</html>

回复收藏 0 原文

~没有更多了~