前面在做一个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输入光标的更多相关文章

  1. 解决ios手机中input输入框光标过长的问题

    修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-siz ...

  2. chrome、firefox、IE中input输入光标位置错位解决方案

    以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...

  3. 教你如何使用css隐藏input的光标

    今天公司的ui突然跑过来问我一个问题:"如何在不影响操作的情况下,把input的光标隐藏了?". 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜 ...

  4. 移动端ios升级到11及以上时，手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  5. 关于隐藏input输入内容问题

    如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只 ...

  6. 在iOS中去掉input的光标

    在input上添加 readonly unselectable="on" οnfοcus="this.blur()" 就可以了.

  7. 隐藏input的光标

    https://segmentfault.com/q/1010000000684888 https://wap.didialift.com/beatles/campaign/driver/activi ...

  8. 解决ios下部分手机在input设置为readonly属性时，依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...

  9. 隐藏input光标和输入内容方法

    text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标

随机推荐

  1. TDG今日成立！

    大家好我们是来自土1603-3的佟天宇.杨子浩.吴强.周泊辰(从左到右) 我们的团队名称是  TDG队 我们的口号是:“Legends Never Die!” 队员简介: 佟天宇 个性:儒雅随和 特长 ...

  2. /debug/requests is already registered. You may have two independent copies of golang.org/x/net/trace in your binary, trying to maintain separate state. This may involve a vendored copy of golang.org/x

    找到问题就很好解决了,直接百度  go依赖管理-govendor go get -u github.com/kardianos/govendor 先获取这个,然后将govendor.exe放入path ...

  3. 【问题与解决】showModalDialog is not defined 的解决方案

    背景: showModalDialog 是比较老的方法了,有些浏览器不再支持弹出模态窗口了. 比如说谷歌浏览就不再支持了,有文章说明如下: Chrome’s Lack of Support for s ...

  4. docker 端口映射 及外部无法访问问题

    docker容器内提供服务并监听8888端口,要使外部能够访问,需要做端口映射. docker run -it --rm -p : server:v1 此时出现问题,在虚机A上部署后,在A内能够访问8 ...

  5. mysql数据库全备和全备还原（使用Xtrabackup）

    一.使用innobackupex创建全备 语法 innobackupex --user=DBUSER --password=DBUSERPASS /path/to/backup/dir/ innoba ...

  6. Adroid动态加载Apk-插件化技术框架(动态代理方案)

    技术:Android + java +动态加载+插件化   概述 为什么要使用插件化?在开发中,一个项目只会越做越大.初始版本可能是单一功能,后续可能加上各种风马牛不相及的功能.所以我认为插件化可以使 ...

  7. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  8. 并行排序ShearSort ---[MPI , c++]

    思想: (1) 对于一个nxm的数组,使用N个work进行处理. (2) 先按行对数组进行升序和降序排序[由左至右],一般奇数序列work升序,偶数序号的work进行降序 (3)再按列对数组进行升序排 ...

  9. Effective Java 第三版——68. 遵守普遍接受的命名约定

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  10. 20.1翻译系列：EF 6中自动数据迁移技术【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/automated-migration-in-code-first.aspx EF 6 ...