移动端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 相关文章推荐
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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中extract()函数的妙用分析
2012/07/11 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
js继承实现方法详解
2016/12/16 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python解析json实例方法
2013/11/19 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python计算auc的方法
2020/09/09 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
中级会计职业生涯规划书
2014/03/01 职场文书
初中家长寄语
2014/04/02 职场文书
说明书范文
2014/05/07 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
放假通知怎么写
2015/08/18 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python语言内置数据类型
2022/02/24 Python