Question

如何阻止用户输入超过max和min属性的值。虽然如果用户从右上角的箭头更改值，则约束正常工作。

注意：我可以选择使用angularjs

＆＃13;

  <input type="number" max="3" value="2" min="0" />

＆＃13;

Answer 1

也许不是对你的问题的直接回答，而是一个替代的想法，因为阻止有意的用户输入可能不是一个明智的想法（如果你没有提供适当的反馈，可能会产生混乱和挫折感（这个键盘是这个）工作？）;您可能需要播放声音，或根据您的用户所使用的操作系统稍微摇动输入字段。

您可以使用:invalid伪选择器设置错误输入的样式（默认情况下，某些浏览器已经添加了一些样式）

＆＃13;

  input:invalid { background: #f00; }

＆＃13;

  <input type="number" max="3" value="2" min="0" />

＆＃13;

Answer 2

我认为角度有点矫枉过正

html代码：

 <input type="number" max="3" value="2" min="0" id="myNumInput"/>

jQuery代码：

  $('#myNumInput').keyup(function(e) {
    var $this = $(this)
    var MAX_VALUE = Number($this.prop('max'))
    var MIN_VALUE = Number($this.prop('min'))

    var val = $this.val()
    if (val.trim() === '' || 
        isNaN(val) ||
        Number(val) > MAX_VALUE ||
        Number(val) < MIN_VALUE) {
      // if the value is invalid, set it to MIN, it depends on your decision, feel free to modify the code here
      $this.val(MIN_VALUE)
    }
    else {
      // convert a string to a number format
      $this.val(Number(val))
    }
  })

HTML5数字类型输入无法按预期工作

2 个答案: