移动端密码及验证码输入框

最新推荐文章于 2024-05-21 10:07:50 发布

StoneIT_ZL

最新推荐文章于 2024-05-21 10:07:50 发布

阅读量3.7k

点赞数

分类专栏： HTML+CSS javascript 文章标签： ios h5 键盘隐藏移动

本文链接：https://blog.csdn.net/StoneIT_ZL/article/details/77945892

版权

针对iOS设备上输入密码或验证码时键盘频繁隐藏的问题，本文提出一种解决方案：使用一个input框配合多个span模拟多个输入框效果。详细介绍了四位短信验证码的实现方式，并指出由于光标无法隐藏的问题，建议通过设置input宽度和margin-left来规避。

摘要由CSDN通过智能技术生成

解决问题：多个input框连续输入iOS键盘隐藏问题

在ios由于focus事件默认被禁止，对于密码或验证码输入框，如果使用多个input框，每输入以为都会使键盘隐藏，输入下一位需要重新点击 input 框调出键盘，造成很不好的体验

以下的方式仅提供的是四位短信验证码的解决方案，密码输入解决方案类似，可在其基础上改造；解决方式是使用一个input框，在其上放置四个span，使输入的值显示在span中，使人感觉有四个输入框，不好的点就是没有光标，有兴趣的同学可以添加；

使用过程中有其他问题或有其他更好的解决方案，欢迎指教！！！

html

<!DOCTYPE>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script>
        (function(doc, win) {
    
            var docEl = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                recalc = function() {
    
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 375) + "px"
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            recalc()
        })(document, window);

最低0.47元/天解锁文章

StoneIT_ZL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端密码及验证码输入框

解决问题：多个input框连续输入iOS键盘隐藏问题在ios由于focus事件默认被禁止，对于密码或验证码输入框，如果使用多个input框，每输入以为都会使键盘隐藏，输入下一位需要重新点击 input 框调出键盘，造成很不好的体验以下的方式仅提供的是四位短信验证码的解决方案，密码输入解决方案类似，可在其基础上改造；解决方式是使用一个input框，在其上放置四个span，使输入的值显示在span中
复制链接

扫一扫

专栏目录