前面在做一个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. jdk各种包安装方式

    大家都知道,现在JAVA的发展可谓是如日中天,它覆盖面非常广泛,小到个人PC,大到商业应用都能见到它的身影.以前它是由SUN公司来维护的,现在已经归属到甲骨文旗下了. 今天我们来学习一下Java JD ...

  2. JS_高阶函数（sort）

    //javaScript sort()排序算法 //sort()方法默认把所有的元素转换成String再排序,字符串是根据ASCII进行排序的,所以会出现“10”排在“2”前面,或是小写字母“a”排在 ...

  3. JSP(8)—EL案例和JSTL案例

    1.EL案例 el.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  4. jQuery 学习04——遍历：定义、向上、向下、同级、过滤

    Query 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素. 以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...

  5. splash

    function main(splash, args) splash.images_enabled = false //不加载图片 assert(splash:go(args.url)) assert ...

  6. leetcode 566. 重塑矩阵 c++ 实现

    1.问题描述: 在MATLAB中,有一个非常有用的函数 reshape,它可以将一个矩阵重塑为另一个大小不同的新矩阵,但保留其原始数据. 给出一个由二维数组表示的矩阵,以及两个正整数r和c,分别表示想 ...

  7. 前端 使用 crypto-js 对数据进行对称加密

    From:  https://www.cnblogs.com/CyLee/p/7216988.html 传送门: # crypto-js github https://github.com/brix/ ...

  8. Print all attributes and values in a Javascript Object

    function printObject(o) { var out = ''; for (var p in o) { out += '\n' + ':: ' + p + '(' + typeof(o[ ...

  9. 【纵谭 Python】系列直播（持续更新）

    老周最近录了一些跟 Python 有关的直播,可以在“一直播”中搜索 ID 号 139251129 关注,也可以在微博中查看,反正都一样,同步的. 第一集:简单胡扯一下相关环境搭建.安装 Python ...

  10. ubuntu下安装配置apache2与php

    1:安装apache2 sudo apt install apache2 2:修改端口号 sudo vi /etc/apache2/ports.conf 3:修改跟目录 在 /etc/apache2/ ...