为什么我的<input type='xxx' />这么多坑

1,146 阅读3分钟

本文将持续不断的更新,因为坑是永远也踩不完的............

改变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问题以及解决方案,如有错误,欢迎指正!

如果你觉得这篇文章对你有所帮助,请别忘记点个赞和分享给你的小伙伴哦~😊😊😊