移动端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控制HTML元素动画效果
Feb 08 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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开源建站平台小结
2010/04/22 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP文件操作方法汇总
2015/07/01 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript日期格式化方法小结
2015/12/17 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
python数据封装json格式数据
2018/03/04 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
如何清空Session
2015/02/23 面试题
2014年法院工作总结
2014/11/24 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
go语言-在mac下brew升级golang
2021/04/25 Golang
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python