html input隐藏光标,IOS & Android 下完美隐藏input光标

最新推荐文章于 2024-09-02 11:08:53 发布

息相吹

最新推荐文章于 2024-09-02 11:08:53 发布

阅读量849

点赞数

文章标签： html input隐藏光标

解决在iPhone设备上input字段无法隐藏光标的难题，通过CSS样式text-indent和margin-left实现。同时提供了相关代码示例，确保在不同设备上光标都能被正确隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

电脑和安卓手机都没问题

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

设置透明度也没用

最后是通过多加了

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

margin-left: -50%;

就可以了。最终代码：

设置支付密码w

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

} */

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

//执行其他操作

}

});

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