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


Posted in HTML / CSS onSeptember 28, 2020

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 #HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 #HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 #HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 #HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 #HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 #HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 #HTML / CSS
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
javascript显示中文日期的方法
2015/06/18 Javascript
Bootstrap精简教程
2015/11/27 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
三个儿子教学反思
2014/02/03 职场文书
春风行动实施方案
2014/03/28 职场文书
干部选拔任用方案
2014/05/26 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs