手机端HTML5 input普遍难题(总结◎)

日期：2021-01-21 类型：科技新闻 

关键词：小程序制作流程，抽奖小程序，微信小程序怎么开店，小程序码生成，小程序模版

1. 除掉input 在iOS中的默认设置圆弧和内黑影

iOS下 input会出现内置的圆弧和内黑影，除掉方式以下：

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

2. 聚焦点在 input 时，placeholder 沒有掩藏

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

3. input 键入框调成数据电脑键盘

独立应用type="number"时，iOS调起的其实不是九宫格款式的数据电脑键盘，假如必须调起九宫格的数据电脑键盘必须再加 pattern="[0-9]*" 特性

<!-- 数据电脑键盘 含有标记，非九宫格款式 -->
<input type="number"/>

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

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

4. 检索时，电脑键盘的回车键按键文本设置为“检索”

处理： input 应用 type="search"，放到 form 表格内。二者融合就可以使键入法中的回车键按键文本变成“检索”

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

5. 更改input placeholder色调

::-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 { /* Internet 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;  
}

6. iOS下autofocus focus()无效的难题

iOS下不可以全自动获得聚焦点，务必是在监视到客户传出的恶性事件的涵数中实行focus才有效，例如：

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

到此这篇有关手机端HTML5 input普遍难题(总结)的文章内容就详细介绍到这了,大量有关手机端HTML5 input內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：设计方案心得:大家猜您会喜爱 返回下一篇：没有了