移动端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()
Apr 02 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
详解如何获取localStorage最大存储大小的方法
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
js判断是否是手机页面
2017/03/17 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
python 实现归并排序算法
2012/06/05 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python 实现图片批量压缩的示例
2020/12/18 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
跟单业务员岗位职责
2014/03/08 职场文书
《春笋》教学反思
2014/04/15 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
React列表栏及购物车组件使用详解
2021/06/28 Javascript