input只输入数字的条件判断

不只是大师 2020年03月18日 1,348次浏览

input只输入数字的条件判断

<input type="number" value="" onchange="foo()" pleaseholder="请输入数字"> 

我们在使用input标签时,经常会遇到只让输入数字的输入框的需求,这个时候很多人都会通过设置type值为number,然后再进行一些简单的判断,这样做也是很麻烦的,在进行校验判断时也是比较繁杂。所以我们可以采用下面直接type="text",然后进行校验,下面是校验方法:

  function foo(val) {
    var t = val.charAt(0)
    val = val.replace('.', '$#$') // 把第一个字符'.'替换成'$#$'
        .replace(/\./g, '') // 把其余的字符'.'替换为空
        .replace('$#$', '.') // 把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, '') // 只能输入数字和'.'
        .replace(/^\./g, '') // 不能以'.'开头
        // .replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1') // 只保留2位小数
    if (t === '-') { // 首位为负号
       val = '-' + val
    }
    if (t === '0' && val.length > 1) { // 首位是0
       if (val.charAt(1) !== '.') {
       	   val = val.substring(1)
       }
    }
    return val
 }