为何个人这么多坑

本文将持续不断的更新，由于坑是永远也踩不完的............

改变input框中光标的颜色

谷歌浏览器的默认光标颜色是黑色的，咱们能够看到GitHub上的光标倒是白色，那么这个用CSS怎么改变呢?

1.使用color来实现

光标的颜色是继承自当前输入框字体的颜色，因此用color属性便可改变：

input{
    color:red
}
复制代码

2.使用caret-color来实现

若是只想改变光标的颜色而不改变字体的颜色那就使用caret-color属性:

input{
    caret-color:red
}
复制代码

隐藏光标（奇葩需求）

1.利用光标颜色透明来欺骗用户

input{
    caret-color:transparent
}
复制代码

input中的占位符文字颜色大小

input::-webkit-input-placeholder{
    font-size:14px;
    font-family:PingFangSC;
    font-weight:400;
    color:red;
}
复制代码

input[type=number]没法获取小数点

解法一：

修改type为text，

弊端是弹出不是数字键盘（不符合需求）

解法二：

<input type="number" pattern="[0-9]*">
复制代码

注意点

• iOS中，只有[0-9]*才能够调起九宫格数字键盘，\d 无效
• Android 4.4如下(包括X5内核)，二者都调起数字键盘；

解法三：

动态修改input的属性

绑定input的type属性
<input :type="onFocus?'text':'number'" placeholder='请输入金额' v-model='inputValue' @keyup='handle($event)'>
复制代码

window.addEventListener('focus',()=>{
    this.onFocus = true
})

window.addEventListener('blur',()=>{
    this.onFocus = false
})
复制代码

扩展（产品需求来也～～～～）

1.输入框中只能输入小数点后两位，小数点前四位(代码冗余，有空会精简，请各位看官轻喷~~~~) 解法四 （暴力处理）

handle(event){
    let val= event.target.value.replace(/[^\d|.]/g,'');
    let reg = /^\d{1,4}\.{0,1}\d{0,2}$/;
    if(val.indexOf('0') == 0) {
        if(val.substr(val.indexOf('0')+1,1) == 0){
            val = '0'
        }else if(val.substr(val.indexOf('0')+1,1) == '.'){
            val = val
        } else{
            val = val.substr(val.indexOf('0')+1)
        }
    }
    if(reg.test(val)){
        if(val.indexOf('.') != -1){
            if(val.substr(val.indexOf('.')).length>3 ){
                return this.inputValue = val.substr(0,val.indexOf('.')+2)
            }
            return this.inputValue = val;
        }else{
            if(val.length>4){
                return this.inputValue = val.substr(0,4);
            }else{
                return this.inputValue = val
            }
        }
    }else{
        if(val.indexOf('.') == 0){
            return this.inputValue = '';
        }else if(val.indexOf('.') == 5){
            let arrs = val.split('');
            arrs.splice(val.indexOf('.')-1,1);
            let vals = arrs.join('')
            return this.inputValue = vals
        }else{
            if(val == ''){
                return this.inputValue = ' '
            }
            let Vals = val.substr(0,val.length-1);
            return this.inputValue = Vals;
        }
    }
}
复制代码

input输入框没法输入

user-select属性详情

有多是在代码中存在如下缘由

xxxxx{
    -webkit-user-select:none    
}
复制代码

更改成

*:not(input,textarea) { 
    -webkit-user-select: none; 
}
复制代码

数字精度问题

历史背景： 计算机在进行四则运算时，对于无限循环的小数，会进舍入处理 例如： 0.1 + 0.2 = 0.30000000000000004

方法一：toFixed()

• 指定要保留的小数位数(0.1+0.2).toFixed(1) = 0.3; 这个方法toFixed是进行四舍五入的也不是很精准，对于计算金额这种严谨的问题，不推荐使用，并且不通浏览器对toFixed的计算结果也存在差别。

• 1.335.toFixed(2) = 1.33 //竟然没有四舍五入

• 不一样浏览器对 toFixed() 方法的处理结果是不一样的。 好比：(2.445).toFixed(2) 在 IE 中的执行结果为 "2.45"，可是在 Chrome 中的执行结果为 "2.44"。

方法二：

把须要计算的数字升级（乘以10的n次幂）成计算机可以精确识别的整数，等计算完毕再降级（除以10的n次幂），这是大部分编程语言处理精度差别的通用方法。

function ToFixed(num,s){
    let times = Math.pow(10,s)
    let des = num * times + 0.5
    des = parseInt(des, 10) / times
    return des + ''
}
复制代码

方法三

使用类库

Math.js

Math.js是一个用于JavaScript和Node.js的扩展数学库。它具备灵活的表达式解析器，支持符号计算，带有大量内置函数和常量，并提供了一个集成的解决方案，能够处理不一样的数据类型，如数字，大数，复数，分数，单位和矩阵。功能强大且易于使用。

GitHub：github.com/josdejong/m…

decimal.js

为 JavaScript 提供十进制类型的任意精度数值。

GitHub：github.com/MikeMcl/dec…

big.js

提供十进制类型的任意精度数值的小型、快速JavaScript库。

GitHub：github.com/MikeMcl/big…

结尾

上述内容就是我遇到的input问题以及解决方案，若有错误，欢迎指正！

若是你以为这篇文章对你有所帮助，请别忘记点个赞和分享给你的小伙伴哦～😊😊😊