移动端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背景下的@font face规则
May 04 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
德生H-501的评价与改造
2021/03/02 无线电
php stream_get_meta_data返回值
2013/09/29 PHP
php对数组排序代码分享
2014/02/24 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python中函数参数匹配模型详解
2019/06/09 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
化工专业推荐信范文
2013/11/28 职场文书
网页美工求职信范文
2014/04/17 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
幼儿园课题方案
2014/06/09 职场文书
五一活动标语
2014/06/30 职场文书
报到证办理个人委托书
2014/10/06 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS