隐藏的输入框调起软键盘问题--ios/安卓

最新推荐文章于 2025-04-07 16:50:18 发布

向阳的小老鼠

最新推荐文章于 2025-04-07 16:50:18 发布

阅读量2.2k

点赞数

文章标签： ios android javascript css html5

本文链接：https://blog.csdn.net/m0_37097272/article/details/108775783

版权

本文详细讲述了在移动端开发中遇到的输入框问题，包括输入内容反转和部分iOS设备无法正常唤起软键盘。通过分析和调试，找到了问题的原因并提供了解决方案：设置隐藏input的宽度以防止内容反转；为iOS设备的输入框添加type="text"以确保软键盘正常显示。这些问题的解决有助于提升移动端页面的用户体验。

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

pia效果图

移动端验证码/密码输入框实现--安卓/ios适用

基于以上验证码实现方式的后期填坑来了，以下移动端验证码/密码输入框实现--安卓/ios适用统称“上篇文章”

最近仿照我的上篇文章又新写了个验证码的小页面，有些微的不同

输入身份证后四位，由于可能有X字母，所以隐藏input的type不能设置为number了，懒惰的我直接删掉了type属性（造坑开始）

且因为上次研究时漏掉了一些知识点，也造了一波坑，以下一一列举。

问题1、四位空格输入，1234，但是每次输入下一个数字，前面的内容都会整体向后移动，输完结果是4321；且输入一半点删除没反应。还得输入总共五位数字才能删除

？？！我懵了，input给显示的几个span的赋值方式（见上篇文章的js代码）是一样样的呀，怎么回事

debug发现隐藏的input值就已经是4321了，所以不是赋值方法的问题，以下是有问题的隐藏input的样式：

#IdentifyNoCheckInput {
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: 10px;
    position: absolute;
    top: -11px;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
}

最初怀疑是光标自动到了最前面导致的，使用了百度的手动移动光标方法，并不管用。

对比上篇文章中隐藏input的样式，可以发现本次宽度设成了0，有高度（高度随意，只要不挡住别的元素显示就行），有宽度或高度是为了占位，能唤起软键盘。

而上篇文章中是有宽度的，这个差别引起了我的怀疑。为以上样式新增两条