当前位置:  开发笔记 > 前端 > 正文

防止html输入type = number永远为空

如何解决《防止html输入type=number永远为空》经验,为你挑选了2个好方法。

我知道HTML 5允许输入类型number,它只允许用户输入数字类型的输入.当我的页面加载时,我将默认输入设置为0,但用户可以删除此值,以便在用户点击提交时提交空白输入(null)?有没有办法让用户删除输入中的所有数字时,默认值为0?我这里不是在谈论验证.

试图避免一个丑陋的JS黑客,但如果这是唯一的方式,那么我想我将不得不走那条路.



1> epascarello..:

所以使用HTML5验证.除非有效,否则不会提交.

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}


2> Brett DeWood..:

HTML5验证规则仅在提交表单时有用。如果要防止输入为空,则需要使用一些JS。

以下内容(不是“丑陋的JS黑客”)将适用于number页面上的所有输入,并0在用户尝试将输入保留为空时插入值。

const numInputs = document.querySelectorAll('input[type=number]')

numInputs.forEach(function(input) {
  input.addEventListener('change', function(e) {
    if (e.target.value == '') {
      e.target.value = 0
    }
  })
})


推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有