移動端input/textarea輸入框光標高度兼容及其他事項

兼容方式（僅適用於移動端，pc端對ie瀏覽器兼容不友好）

IE：不管該行有沒有文字，光標高度與font-size大小一致

FF：該行沒有文字時，光標大小與input的 height 大小一致；該行有文字時，光標大小與font-size大小一致

chrome：有2種情況，①設置了line-height  該行沒有文字時，光標大小與input的 line-height 大小一致; 該行有文字時，光標大小從input頂部到文字底部

　　　　　　　　　　 ②沒有設置line-height  光標大小與font-size一樣

所以，input在使用的時候，最好不要設line-height, 可以設定一個較小的height, 然后用 padding 來撐開，這樣基本上可以解決所有瀏覽器的問題
input{
    width: 220px;
    height: 10px;  //給一個基礎的height即可
    padding: 15px 0px;  //設置padding撐開
    font-size: 12px;
    border:1px solid #dcdcdc;
    border-radius: 4px;
}

注意事項

1--在iOS端，Input框上部會有陰影，不美觀
添加代碼  -webkit-appearance: none;  即可

2--Input字數超出會隱藏超出部分；textarea則會以滾動條展示超出部分。
則若需填入的字數較多，建議使用textarea，如下

<textarea type="text" v-model="name" rows="2" placeholder="姓名" />

textarea{
    -webkit-appearance: none;  //去除ios端文本框上部陰影
    width:100%;
    padding: 10px;
    box-sizing: border-box;
    border:1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 14px; 
    resize: none;  //取消文本域拖動屬性
}

3--在iOS端，focus()事件不能延時生效，建議使用$nextTick

let times=setTimeout(()=>{
    document.getElementById("inputElem").focus()    //不生效
    clearTimeout(times)
},200)

this.$nextTick(()=>{
    document.getElementById("inputElem").focus()  //生效
})

在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中