移动端HTML5 input常见问题(小结)

input{
    -webkit-appearance: none;
    border-radius: 0;
}

input:focus::-webkit-input-placeholder{
    opacity: 0;
}

<!-- 数字键盘 带有符号，非九宫格样式 -->
<input type="number"/>

<!-- 九宫格数字键盘 -->
<input type="number" pattern="[0-9]"/>

<!-- 电话号码键盘 -->
<input type="tel"/>

<form action="">
    <input type="search" />
</form>

::-webkit-input-placeholder { / WebKit browsers /
  color:    #999;
}
:-moz-placeholder { / Mozilla Firefox 4 to 18 /
  color:    #999;
  opacity:  1;
}
::-moz-placeholder { / Mozilla Firefox 19+ /
  color:    #999;
  opacity:  1;
}
:-ms-input-placeholder { / Inter Explorer 10+ /
  color:    #999;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { / WebKit/  
    color:    #666;  
}  
input:-moz-placeholder, textarea:-moz-placeholder { / Mozilla Firefox 4 to 18 /  
    color:    #666;  
}  
input::-moz-placeholder, textarea::-moz-placeholder { / Mozilla Firefox 19+ /  
    color:    #666;  
}  
input:-ms-input-placeholder, textarea:-ms-input-placeholder { / IE 10+ /  
    color:    #666;  
} 

// openNotifyReplay 是click触发的事件
openNotifyReplay = (e) => {
    this.setState({
        notifyReplayVisible: true
    }, ()=>{
        document.getElementById("replayPopupText").focus()
    })
}