移动端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 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
HTML中link标签属性的具体用法
May 07 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
浅说js变量
2011/05/25 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
怎样使用Python脚本日志功能
2016/08/14 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
C# .NET面试题
2015/11/28 面试题
50道外企软件测试面试题
2014/08/18 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
培训主管岗位职责
2014/02/01 职场文书
2014年秘书工作总结
2014/11/25 职场文书