前面在做一个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. Linux之nginx反向代理三台web

    作业三:nginx反向代理三台web 实现基于轮询的方式调度三台web,并验证结果 实现基于权重的方式调度三台web,并验证结果 实现基于hash的方式调用三台web,并验证结果 [root@loca ...

  2. JDBC（12）—DBUtils工具类

    DBUtils:commons-dbutils是Apache组织提供的一个开源JDBC工具库,它是对JDBC的简单封装,并且使用dbutils会极大的简化jdbc编码的工作量,同时不会影响到程序的性能 ...

  3. hdu6026 Deleting Edges（Dijkstra+思路）

    https://vjudge.net/problem/HDU-6026 我一直想不明白的是,它的乘法是如何保证n-1条边的.后来画了一张图大概能明白了. 结合最后的乘法二层循环的代码来看,当i=4的时 ...

  4. [rtsp]海康IPC监控摄像头远程外网监控配置（DDNS）

        本来这个DDNS服务正是我想要的,但是配置了之后海康提示不再提供这个服务了,以后统一使用萤石云了,看来有必要去学习下萤石开放平台的api,看都提供哪些服务. 海康威视网络摄像机出厂的默认IP地 ...

  5. Android开发中常见的设计模式 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. API 'variant.getJavaCompiler()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'

    WARNING: API 'variant.getJavaCompiler()' is obsolete and has been replaced with 'variant.getJavaComp ...

  7. VS Code 插件

    https://blog.fundebug.com/2018/07/24/vs-extensions/

  8. php urlencode vs java URLEncoder.encode

    结论:urlencode 先比URLEncoder.encode多编码 “ * ” 符号,其他都保持一致 php urlencode  phpversion()>=5.3 will compli ...

  9. DEVOPS落地实践分享

    DEVOPS落地实践分享 转载本文需注明出处:微信公众号EAWorld,违者必究. 引言: DevOps的理念已经说了很多年,其带来的价值逐渐被接受,很多企业也逐渐引入了DevOps.目前普元DevO ...

  10. hive SQL COALESCE 函数

    COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值.如果所有的表达式都是空 ...