关于微信手机端IOS系统中input输入框无法输入的问题
最近两天做移动端游戏举报页面。遇到一个问题,移动端的input都不能输入了,后来发现可能是
-webkit-user-select :none ;
在移动端开发中,我们有时有针对性的写一些特殊的重置,比如:
* { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁用Webkit内核浏览器的文字大小调整功能。 -webkit-text-size-adjust: none; //避免点击a标签或者注册了click事件的元素时产生高亮 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // //禁止用户进行复制.选择. -webkit-user-select: none;}
其中,-webkit-user-select :none ;会产生一些问题。
这是webkit内核浏览器下的一个bug,具体可以参考这篇文章:https://bugs.webkit.org/show_bug.cgi?id=82692
阻止了用户的选择内容行为,会导致一些“内容可编辑”标签无法正常使用,比如input、testarea。
如果网站不需要阻止用户的选择内容的行为就可以使用如下样式:
* { -webkit-user-select: text; -user-select: text;}
另一种方式:
*: not(input, textarea) { -webkit - touch - callout: none; -webkit - user - select: none;}
user-select , can cause issues in elements with contenteditable="true" ,so better to add that too .
所以,最好把它也加上。
最终的代码:
[contenteditable = "true"], input, textarea { -webkit-user- select: auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-user-select: auto!important; -o-user-select: auto!important; user-select: auto!important;}
上面内容大概就是 这么多。但是我一一试了,在我的代码中并没有 卵用。
后来开始用排除法去清查css样式表,发现在ios系统下面,布局方式使用的事 rem方式去布局的话,正巧,在input上面书写了rem的宽或者高。
那么恭喜你,在真机上测试是 拿不到焦点的,必须用px或者百分比去代替。
不知道有没有 其他人像我一样遇到。
-----------------------------------------------------------------------------------------------------------------------------------------------------
转载于:https://www.cnblogs.com/mrnut/p/7656019.html
关于微信手机端IOS系统中input输入框无法输入的问题相关推荐
- IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题 在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
- ios端自动获取输入框焦点,解决ios手机中input输入框光标过长的问题
在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .rec ...
- ios系统上input输入框无法输入值的解决办法
有好多做手机端网页开发的朋友常常遇到这种问题,就是苹果系统不能在输入框输入值只要在input 上面加上css样式-webkit-user-select:text !important 或者在父类加上这 ...
- 如何在IOS系统中实现输入框自动聚焦并调起键盘
ios有个安全机制,只有用户点击才能调起键盘(说白了就是让用户点一下才能调起): 所以ios的解决方法是 :第一个页面写个input,先把键盘调起来,当点击搜索中在click事件中写: this.$r ...
- React中input输入框中文输入的问题
需求:封装一个input输入组件 // Input 组件 const Input = () => {const handleChange = (e: any) => {console.lo ...
- 解决 input 输入框在 iOS 系统中无法输入内容
问题 input 输入框在 Android 系统可以输入和点击,但是在 iOS 系统上 input 输入框无法点击和输入. 解决方法 方案一:在代码中查找并去掉下列样式 -webkit-touch-c ...
- 解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后,页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
- vue单应用在ios系统中实现微信分享功能
表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯 就是这么简单 进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信J ...
- ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空 问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
最新文章
- cad自动标注界址点_CAD制图中的5个小技巧
- 一般处理程序使用Session报错(未将对象引用设置到对象实例)
- grub shell 错误_各种情况GRUB损坏进不了系统的解决方案
- 百度网盘空间调整:这类用户2TB变100GB!
- IO流 (三) ----- 字符流和字符缓冲流
- linux 系统常用的C语言函数库
- spark官方文档_Spark机器学习之Pipeline
- DELPHI基础教程 第七章 剪贴板和动态数据交换
- L1-02-yum源的配置(本地源)
- 企业架构之道(三)之企业架构框架概述
- 数据分析师如何度过互联网寒冬
- Typora安装教程
- 飞秋远程可利用0day 的详细分析和利用方法 飞秋漏洞
- 【直观详解】线性代数的本质
- Hive的nvl、coalesce、if、nvl2
- mysql分表 ---Merge
- java list 随机获取n个_java – 从列表中取n个随机元素?
- java计算机毕业设计学生公寓管理系统源码+数据库+系统+lw文档+mybatis+运行部署
- 英语读书笔记-Book Lovers Day01
- 第八周 oj 2001 打印数字图形
热门文章
- 直线和圆交点 halcon_初中数学三角形、四边形、圆辅助线的添加方法
- 软件工程大学生职业生涯规划_大学生职业生涯规划的现实意义
- android studio写坦克大战代码_GitHub 项目推荐:俄罗斯小游戏、Markdown 幻灯片、头像生成器、Logo 制作、坦克大战...
- catia 工厂设计_SolidWorks、creo、UG哪个更适合机械设计?
- 线结构光标定详细步骤与实现HALCON
- 排序只显示前5_Linux 文件大小统计与排序 du,df 和 sort!
- qstring删除最后一个字符_Excel去掉最后一个字符两个方法,正反思维,你支持哪一个?...
- Java 启动线程并保持
- 宁夏启动人工智能助推教师队伍建设行动
- Java awt Desktop 无法调用系统浏览器