爲何個人這麼多坑

時間 2019-11-08

標籤爲何個人简体版

原文原文鏈接

本文將持續不斷的更新，由於坑是永遠也踩不完的............

改變input框中光標的顏色

谷歌瀏覽器的默認光標顏色是黑色的，咱們能夠看到GitHub上的光標倒是白色，那麼這個用CSS怎麼改變呢?git

1.使用color來實現

光標的顏色是繼承自當前輸入框字體的顏色，因此用color屬性便可改變：github

input{
    color:red
}
複製代碼

2.使用caret-color來實現

若是隻想改變光標的顏色而不改變字體的顏色那就使用caret-color屬性:web

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.輸入框中只能輸入小數點後兩位，小數點前四位(代碼冗餘，有空會精簡，請各位看官輕噴~~~~) 解法四 （暴力處理）bash

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.30000000000000004ui

方法一：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 + ''
}
複製代碼