问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎样让input type=number不能输入负数

头像
那是啥
    221711

    怎样让number类型的不能输入负数，比如我输入-1，会马上变回1 ，也不能为空！

    htmljavascriptcss
    阅读 40.6k
    4 个回答
    得票最新
    头像
    testnullundefine
      2.5k32141

      基本的屏蔽上下箭头减少：

      <input type="number" name="number" min="1" max="10" />

      屏蔽手动输入，使用js监听oninput ，自动去掉 -即可

      需要注意的是，如果number输入的内容不是正确的数字，获取到的value是空的

      <body>
    <input type="number" name="" id="number" min = 0 >
</body>
<script>
    document.getElementById("number").addEventListener("input",function(event){
       event.target.value = event.target.value.replace(/\-/g,""); 
    });
</script>

      【更新】使用keypress的判断

          document.getElementById("number").addEventListener("keypress",function(event){
        if(event.keyCode == 45){
            event.preventDefault();
        }
    });
      头像
      陌路凡歌
        7.9k21119
            <input type="text"  oninput="aaa(this)"/>
        <script>
            function aaa(obj){                    
                    var num = obj.value;
                    var re=/^\d*$/;                  
                    if(!re.test(num)){                        
                        isNaN(parseInt(num))?obj.value='':obj.value=parseInt(num);        
                    }                                          
            }
        头像
        穗乃果
          8.9k41837

          如果整数可以考虑 <input type="tel" />

          头像
          suxiaoming
            38811525

            HTML：

              <input type="number" oninput="checkNum(this.value)" id="input"/>

            JS

            function checkNum (val) {
    document.getElementById('input').value = val >= 0 ? val : 0
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题