IOS & Android 下完美隐藏input光标

最新推荐文章于 2021-06-04 03:09:55 发布

weixin_33971130

最新推荐文章于 2021-06-04 03:09:55 发布

阅读量239

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/u/2436852/blog/1582323

版权

2019独角兽企业重金招聘Python工程师标准>>>

为什么iphone手机一定有这个光标。。。找了无数资料了。。都没办法去掉这个光标！

电脑和安卓手机都没问题

只要获取了焦点，在iPhone手机上就一定会出现这个光标

设置透明度也没用

最后是通过多加了

text-indent: -999em;//段落缩进

margin-left: -50%;

就可以了。最终代码：

<html>
<head>
<title>设置支付密码w</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="user-scalable=no;">

<script src="js/zepto.min.js"></script>
<style>  
	.pwd-box{  
        width:100%;  
        padding-left: 1px;  
        position: relative;  
        border-radius: 3px;  
		over-flow:hidden  
    }  
    .pwd-box input[type="tel"]{  
        width: 150%;  
        height: 80px;  
        color: transparent;  
        position: absolute;  
        top: 0;  
        left: 0;  
        border: none;  
        font-size: 18px;  
        opacity: 0;  
        letter-spacing: 35px;  text-indent: -999em;margin-left: -40%;
    }  
    .fake-box input{  
        width: 15%;  
        height: 80px;  
        border-radius: 8px;
        text-align: center;  
        font-size: 50px;  
        margin-left: 4px;
        border: 1px solid #AFAFAF;
    }  
    /*.fake-box input:nth-last-child(1){  
        border:none;  
    } */ 
</style> 
</head>
<body bgcolor="#F7F7F7" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (设置支付密码w.psd) -->
<table id="__01" width="100%" height="1136" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			<img src="images/&#x8bbe;&#x7f6e;&#x652f;&#x4ed8;&#x5bc6;&#x7801;w_02.jpg" width="100%" height="160" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/设置支付密码w_09.jpg" width="166" height="90" alt=""></td>
		<td colspan="5">
			<div class="pwd-box">  
			    <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
			    <div class="fake-box">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			    </div>  
			</div> 
		</td>
		<td>
			<img src="images/设置支付密码w_09.jpg" width="166" height="90" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<a href="#"><img src="images/&#x8bbe;&#x7f6e;&#x652f;&#x4ed8;&#x5bc6;&#x7801;w_10.jpg" width="100%" height="238" alt=""></a>
		</td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/&#x8bbe;&#x7f6e;&#x652f;&#x4ed8;&#x5bc6;&#x7801;w_11.png" width="100%" height="514" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->

<script>  
var $input = $(".fake-box input");  
            $("#pwd-input").on("input", function() {  
                var pwd = $(this).val().trim();  
                for (var i = 0, len = pwd.length; i < len; i++) {  
                    $input.eq("" + i + "").val(pwd[i]);  
                    $input.eq("" + i + "").css({
                    	border:'1px solid #4FA4FF'	
                    });
                }  
                $input.each(function(i,obj) {  
                	var ii = i-1<0?0:i-1;
                	var temp = $input.eq(ii);
                	if(temp.val()==""||null==temp.val()){
                		temp.css({border:'1px solid #AFAFAF'});
                	}
                	
                    var index = $(this).index();  
                    if (index >= len) {  
                        $(this).val("");  
                    }  
                    if($input.eq(5).val()==""||null==$input.eq(5).val()){
                		$input.eq(5).css({border:'1px solid #AFAFAF'});
                	}
                });  
                if (len == 6) {  
                    //执行其他操作  
                }  
            });  
</script>
</body>
</html>

下面贴出一段受到启发的网址：

https://segmentfault.com/q/1010000000684888

http://www.jiekouw.com/archives/369

转载于:https://my.oschina.net/u/2436852/blog/1582323