输入框内只能输入数字

需求：输入框内只能输入数字

这个问题咋一看像是只需要把字符串型转为数字型并且排除掉非数字值就可以了，拍脑袋一想就用上了Number()，parseInt()，parseFloat()等方法，这些方法用来把字符串转为数字确实非常有用，然而我们的需求是在输入框里输入数字，会出现输入"-", "1."等情况，而以上方法都满足不了这样的情况。

输入整数

1. 只能输入非负整型数字，例：1a7bc56 -> 156

方法：使用replace方法替换掉所有非数字字符，这里需要使用正则的全局匹配。

function strToNum (str) {
    return str.replace(/[^\d]/g, '');
}

let s = strToNum('1abckd56');
console.log(s) // 156

2. 只能输入整型数字

方法：与上方类似，只是要判断是否存在负号。

function strToNum (str) {
    let t = str.charAt(0);
    let res = str.replace(/[^\d]/g, '');
    if (t === '-') {
        return '-' + res;
    }
    return res;
}

let s = strToNum('-1abckd56');
console.log(s) // -156

输入浮点数

输入浮点数需要考虑多种情况，通常输入".1", "-.1"这样的数字也能被识别，所以需要考虑是否要输入此种形式数据。

1. 可以输入".1", "-.1"这样的数字

方法：浮点数难点在于小数点的处理，因为小数点至多只能有一个，这里利用replace替换不使用全局匹配时只替换掉第一个符合条件的字符，因此可以把第一个字符先替换成一串特殊字符，然后再使用全局替换替换掉所有其它小数点，最后再把特殊字符串替换回小数点。

function strToNum (str) {
    let t = str.charAt(0);
    let str1 = str.replace(/[^\.^\d]/g, ''); // 把非小数点和非数字的字符替换成空字符串
    let str2 = str1.replace('.', '$#$'); // 把第一个小数点替换成$#$
    let str3 = str2.replace(/\./g, ''); // 把其它小数点替换成空字符串
    let str4 = str3.replace('$#$', '.'); // 把第一个替换的小数点替换回来
    if (t === '-') {
        return '-' + str4;
    }
    return str4;
}

let s = strToNum('-1.ab.ckd56');
console.log(s) // -1.56

2. 不可以输入".1", "-.1"这样的数字

需要考虑小数点在第一位和小数点紧挨着负号后面的情况。

function strToNum (str) {
    let t = str.charAt(0);
    if (t === '.') {
        return ''
    } else if (t === '-') {
        return '-' + str.replace(/[^\d]/g, '');
    }
    let str1 = str.replace(/[^\.^\d]/g, '');
    let str2 = str1.replace('.', '$#$');
    let str3 = str2.replace(/\./g, '');
    let str4 = str3.replace('$#$', '.');
    return str4;
}

let s = strToNum('-.');
console.log(s) // -

补充

如果浏览器支持的话，可以直接使用h5标签<input type="number">来写，缺点是该标签在各个浏览器表现形式不太一样。