前面在做一个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. 【搜索】传感器 @upcexam6023

    时间限制: 1 Sec 内存限制: 128 MB 题目描述 SR最近新买了一款电子桌游 这个玩具内部是M个围成一圈的传感器.每个传感器都有开和关两种工作状态,分别用1和0表示.显然,从不同的位置触发沿 ...

  2. CentOS使用Ubuntu的start-stop-daemon来启动守护进程

    在CentOS下使用守护进程启动有/etc/init.d/functions文件下的daemon方法,但如果要使用Ubuntu下的start-stop-daemon方法也可以实现. 安装如下: # 下 ...

  3. C# Activator

    需要动态的创建一个实例模型的时候,就用Activator.CreateInstance(Type type);如果是明确的知道要创建哪个实例的模型,就可以用 new C#在类工厂中动态创建类的实例,所 ...

  4. HBuilder的扩展插件开发暴露了一个事实：其实不能实现写一次代码实现跨平台App生成

    HBuilder的扩展插件开发,原来并不能生成单独的插件jar,而是以源码 - 类的形式进行开发,这其实就要求必须使用离线打包. 事实上,开发顺序应该是:先弄好离线打包框架,然后在AS里进行扩展插件开 ...

  5. 比较两个list对象是否相同

    public Boolean exist(Container container){ List<SensorAtom> newSensorList = container.getSenso ...

  6. ValueError: output parameter for reduction operation logical_and has too many dimensions ？

    https://docs.scipy.org/doc/numpy-dev/reference/generated/numpy.all.html#numpy.all 运行示例,却发生错误 import ...

  7. 使用http load测试qps

    官网 http://acme.com/software/http_load/ 安装 wget http://acme.com/software/http_load/http_load-12mar200 ...

  8. Spring Cloud Netflix Zuul 重试会自动跳过经常超时的服务实例的简单说明和分析

    在使用E版本的Spring Cloud Netflix Zuul内置的Ribbon重试功能时,发现Ribbon有一个非常有用的特性: 如果某个服务的某个实例经常需要重试,Ribbon则会在自己维护的一 ...

  9. 【C++】解析C++运行环境的搭建

    在本篇文章中,笔者会谈谈如何搭建C++的运行环境.在不同操作系统中,运行C++编译器的命令也各不相同,最常用的编译器是GNU编译器(Linux系统)和微软Visual Studio编译器(Window ...

  10. 基于Spring aop写的一个简单的耗时监控

    前言:毕业后应该有一两年没有好好的更新博客了,回头看看自己这一年,似乎少了太多的沉淀了.让自己做一个爱分享的人,好的知识点拿出来和大家一起分享,一起学习. 背景: 在做项目的时候,大家肯定都遇到对一些 ...