1. 去掉input 在iOS中的默认圆角和内阴影
iOS下 input会有自带的圆角和内阴影，去掉方法如下：

1. input{
   
2.     -webkit-appearance: none;
   
3.     border-radius: 0;
   
4. }

复制代码

2. 焦点在 input 时，placeholder 没有隐藏

1. input:focus::-webkit-input-placeholder{
   
2.     opacity: 0;
   
3. }

复制代码

3. input 输入框调出数字键盘
单独使用type="number"时，iOS调起的并不是九宫格样式的数字键盘，如果需要调起九宫格的数字键盘需要加上 pattern="[0-9]*" 属性

1. <!-- 数字键盘 带有符号，非九宫格样式 -->
   
2. <input type="number"/>
   
3. 
   
4. <!-- 九宫格数字键盘 -->
   
5. <input type="number" pattern="[0-9]*"/>
   
6. 
   
7. <!-- 电话号码键盘 -->
   
8. <input type="tel"/>

复制代码

4. 搜索时，键盘的回车按钮文字设定为“搜索”

解决： input 使用 type="search"，放在 form 表单内。两者结合就能使输入法中的回车按钮文字变为“搜索”

1. <form action="">
   
2.     <input type="search" />
   
3. </form>

复制代码

5. 改变input placeholder颜色

1. ::-webkit-input-placeholder { /* WebKit browsers */
   
2.   color:    #999;
   
3. }
   
4. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   
5.   color:    #999;
   
6.   opacity:  1;
   
7. }
   
8. ::-moz-placeholder { /* Mozilla Firefox 19+ */
   
9.   color:    #999;
   
10.   opacity:  1;
    
11. }
    
12. :-ms-input-placeholder { /* Internet Explorer 10+ */
    
13.   color:    #999;
    
14. }
    
15. 
    
16. input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/  
    
17.     color:    #666;  
    
18. }  
    
19. input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
    
20.     color:    #666;  
    
21. }  
    
22. input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */  
    
23.     color:    #666;  
    
24. }  
    
25. input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */  
    
26.     color:    #666;  
    
27. }

复制代码

6. iOS下autofocus focus()失效的问题

iOS下不能自动获取焦点，必须是在监听到用户发出的事件的函数中执行focus才有用，比如：

1. // openNotifyReplay 是click触发的事件
   
2. openNotifyReplay = (e) => {
   
3.     this.setState({
   
4.         notifyReplayVisible: true
   
5.     }, ()=>{
   
6.         document.getElementById("replayPopupText").focus()
   
7.     })
   
8. }

复制代码

到此这篇关于移动端HTML5 input常见问题(小结)的文章就介绍到这了,更多相关移动端HTML5 input内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/747016.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！