IOS & Android 下完美隱藏input光標

時間 2019-11-20

標籤 ios android 完美隱藏 input 光標欄目 iOS 简体版

原文原文鏈接

爲何iphone手機必定有這個光標。。。找了無數資料了。。都沒辦法去掉這個光標！css

電腦和安卓手機都沒問題html

只要獲取了焦點，在iPhone手機上就必定會出現這個光標web

設置透明度也沒用segmentfault

最後是經過多加了app

text-indent: -999em;//段落縮進iphone

margin-left: -50%;ui

就能夠了。最終代碼：this

<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>

下面貼出一段受到啓發的網址：spa

https://segmentfault.com/q/1010000000684888scala

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