h5 ios手机 隐藏input输入光标
前面在做一个H5中用到的6位数字密码弹框(类似支付、微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层。
先说下实现密码框的思路,一般是采用遮挡隐藏一个输入框,然后在输入框的上面该一层一般是一组6个<span>●</span>,然后通过点击布局是让隐藏的输入框获得焦点,最后监听input的textChange,添加对应个数的●,等于6个的时候执行相应的处理。
一开始为了达到input的完全隐藏,可谓下了许多手段:z-index:负数,opacity:0, color: transparent !important;,可是发现还是不好使。最后尝试了 margin-left: -100%; text-indent: -999em;//文本向左缩进 才解决了问题。
终极大招:再配合设置下隐藏的input的宽度为1px
h5 ios手机 隐藏input输入光标的更多相关文章
- 解决ios手机中input输入框光标过长的问题
修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-siz ...
- chrome、firefox、IE中input输入光标位置错位解决方案
以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...
- 教你如何使用css隐藏input的光标
今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...
- 移动端ios升级到11及以上时,手机弹框输入光标出现错位问题
引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...
- 关于隐藏input输入内容问题
如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只 ...
- 在iOS中去掉input的光标
在input上添加 readonly unselectable="on" οnfοcus="this.blur()" 就可以了.
- 隐藏input的光标
https://segmentfault.com/q/1010000000684888 https://wap.didialift.com/beatles/campaign/driver/activi ...
- 解决ios下部分手机在input设置为readonly属性时,依然显示光标
解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上 onfocus="this.blur()" 方法 添加 ...
- 隐藏input光标和输入内容方法
text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标
随机推荐
- py3 pymysql
虽然大家可能在python2.x中用习惯了mysqldb,但是在python3.x中已经不支持那个组件了. 取而代之的是: import pymysql 所以,大家pip起来吧.另外,mysql官方出 ...
- jQuery 学习04——遍历:定义、向上、向下、同级、过滤
Query 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素. 以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
- pygame-KidsCanCode系列jumpy-part13-改进跳跃
这节研究下跳跃如何做得更自然,先看看之前的跳跃有什么问题,我们把settings.py里的初始化参数调整下: # starting platform # PLATFORM_LIST = [(5, HE ...
- scipy.stats与统计学:4个概率分布:N,chi2,F,t
scipy.stats与统计学:4个概率分布:N,chi2,F,t 四个常用分布的概率密度函数.分布函数.期望.分位数.以及期望方差标准差中位数原点矩: 1,正态分布: from scipy.st ...
- 07、RDD持久化
为了避免多次计算同一个RDD(如上面的同一result RDD就调用了两次Action操作),可以让Spark对数据进行持久化.当我们让Spark持久化存储一个RDD时,计算出RDD的节点会分别保存它 ...
- mysql数据库全备和全备还原(使用Xtrabackup)
一.使用innobackupex创建全备 语法 innobackupex --user=DBUSER --password=DBUSERPASS /path/to/backup/dir/ innoba ...
- mingw 构建 gdal 2.1.2
目录 1.准备 2.生成Makefile 3.编译 4.编译遇到错误及解决办法 1.生成静态库时候ar提示参数列表太长 2.生成动态库时候g++提示参数列表太长 前两日有人在oschian上问我min ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- weak_ptr<T>智能指针
weak_ptr是为配合shared_ptr而引入的一种智能指针,它更像是shared_ptr的一个助手,而不是智能指针,因为它不具有普通指针的行为,没有重载operator*和operator-&g ...
- ASP.NET CORE 中用单元测试测试控制器
之前用ASP.NET CORE做的项目 加了一个新功能,数据库加了个字段balabala.... 更新到服务器上,新功能测试正常,然后就没管了..... 今天客户说网站有BUG,某个页面打开后出错了, ...