软键盘弹起input框滚动到可视区 注册页面 获取验证码倒计时

最新推荐文章于 2022-05-25 10:32:07 发布
最新推荐文章于 2022-05-25 10:32:07 发布
阅读量241 收藏
点赞数
分类专栏： input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangjiang_ing/article/details/88710811
版权 
<!DOCTYPE html>
<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></title>
    <script src="../scripts/jquery-1.10.2.min.js"></script>
    <script src="../scripts/viewport.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        html{
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color:transparent;
        }
        body{
            position: absolute;
            width: 100%;
            background: white
        }
        form,.num,.name,.wrap>div:nth-last-of-type(1){
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 76%;
            z-index: 2;
        }
        form{
            top: 52%;
        }
        .num{
            top: 42%;
            font-size: 50px;
            font-weight: bold
        }
        .name{
            font-size: 24px;
            top: 48%;
        }
        .wrap>div:nth-last-of-type(1){
            font-size: 20px;
            top: 85%;
            text-align: center;
            font-size: 20px
        }
        input{
            font-size: 28px;
            padding-bottom: 10px;
            box-sizing: border-box;
            width: 100%;
            margin: 20px auto;
            border-bottom: 1px solid #dddddd;  
            border-top:0px;  
            border-left:0px;  
            border-right:0px;  
        }           
        input::-webkit-input-placeholder {
            color: #dddddd;
            font-size: 30px;
        }
         .wrap{
            background: white;
            width: 100%;
            height: 100%;
            position: relative
           }
           .bgImg{
               position: absolute;
               left: 0;
               top: 0
           }
           .bgImg,.bgImg img{
            width: 100%;
           }
           .bgImg img{
              display: block
           }
           a{
               text-decoration: none
           }
        .register {
            font-size: 24px;
            color: white;
            text-align: center;
            width: 90%;
            border-radius: 40px;
            display: block;
            padding: 20px 0;
            margin: 12px auto;
            background: -moz-linear-gradient(right, #2cb38a, #00e2b5);
            /* Firefox 3.6 - 15 */
            background: -webkit-linear-gradient(right, #2cb38a, #00e2b5);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #2cb38a, #00e2b5);
            /* Opera 11.1 - 12.0 */
            background: linear-gradient(to right, #2cb38a, #00e2b5) !important;
            /* 标准的语法 */
        }  
        .agreement{
            color: #2cb38a;
            font-size: 22px;
            padding: 2px;
            display: block;
        }
        .gain{
            position: absolute;
            right: 0;
            top: 30%;
            color: #2cb38a;
            font-size: 24px;
            border:0px;
            background-color:transparent
        }
        .confirm{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            background: rgba(0, 0, 0, .3);
            display: none;
        }
        .confirm>div{
            height: 20%;
            border-radius: 20px;
            position: absolute;
            width: 60%;
            left: 50%;
            transform: translateX(-50%);
            top: 40%;
            background: white;
            text-align: center;
            color: #666666;
            font-size: 24px
        }
        .confirm>div {
            position: relative;
            z-index: 100;
        }
        .confirm>div p,.confirm>div a{
            z-index: 101;
            position: absolute;
            left: 50%;
            transform: translateX(-50%)
        }
        .confirm>div p{
            width: 57%;
            top: 24%;
        }
        .confirm>div a{
            color: #2cb38a;
            width: 100%;
            display: block;
            box-sizing: border-box;
            padding:20px;
            border-top:1px solid #999999 ;
            bottom: 0
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="confirm">
            <div>
                <p></p>
                <a href="javascript:void(0);">好的</a>
            </div>
        </div>
        <div class="bgImg"><img src="../images/reg2.png" alt=""></div>
        <p class="num"></p>
        <p class="name"></p>
        <form action="">
            <input type="number" name="" id="" placeholder="请输入手机号" class="phone">
            <input type="number" name="" id="" placeholder="请输入验证码" class="code">
            <button type="button" class="gain" id="btn">获取验证码</button>
            <input type="password" name="" id="" placeholder="请输入密码" class="pass1">
            <input type="password" name="" id="" placeholder="请确认密码" class="pass2">
        </form>
        <div>
            <a href="javascript:void(0);" class="register">成为会员</a>
        </div>
    </div>
    <script>
        $(function () {
            $('body').height($(window).height())
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号 
            var win_h = $(window).height();
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            // $('.wrap').height(document.documentElement.clientHeight);
            var nickname = getURLParameter("nickname");
            var inviteeMemberDays = getURLParameter("inviteeMemberDays");
            var invitationCode = getURLParameter("invitationCode");
            $('.num').html(invitationCode)
            $('.name').html("来自"+nickname+"会员的邀请码")

            //11111111111111111111手机输入框

            //监听手机可视高度 ios无resize事件
            window.addEventListener('resize', function () {
                if ($(window).height() < win_h) {
                    if (isAndroid) {
                        var target = this;
                        setTimeout(function () {
                            target.scrollIntoViewIfNeeded();
                            target.scrollIntoView(true);
                        }, 200);
                    }
                } else {
                }

            });
            //ios监测失焦聚焦即可
            $("input").focus(function () {
            }).blur(function () {
                if (isiOS) {
                    window.scrollTo(0, document.body.scrollHeight);
                }
            });

            //222222222222222222获取验证码

            $('.gain').click(function () {
                if (!myreg.test($('.phone').val())) {
                    $('.confirm').show()
                    $('.confirm>div p').html("请输入正确的手机号")
                    //alert('输入正确的手机号')
                    $('.phone').val('')
                } else {
                    invokeSettime(this)
                    //获取验证码 ajax请求
                    $.submit({
                        type: "get",
                        url: "regCode/" + $('.phone').val(),
                        func: function (res) {
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            $('.confirm').show()
                            $('.confirm>div p').html(jqXHR.msg)
                        }
                    })
                }
            })

            //333333333333333333发送注册请求

            $('.register').click(function () {
                if (!myreg.test($('.phone').val())) {
                    $('.confirm').show()
                    $('.confirm>div p').html("请输入正确的手机号")
                    $('.phone').val('')
                } else if ($('.pass1').val() != $('.pass2').val()) {
                    $('.confirm').show()
                    $('.confirm>div p').html("两次输入密码不一致，请重新输入")
                    $('.pass1').val('')
                    $('.pass2').val('')
                } else if ($('.pass1').val() == "" || $('.pass2').val() == "" || $('.phone').val() ==
                    "" || $('.code').val() == "") {
                    $('.confirm').show()
                    $('.confirm>div p').html("请填写完整的信息")
                } else {
                    //ajax请求
                    $.submit({
                        type: "post",
                        url: "invitation/reg",
                        data:{
                            invitationCode : invitationCode,
                        },
                        func: function (res) {
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            $('.confirm').show()
                            $('.confirm>div p').html(jqXHR.msg)
                        }
                    })
                }
            })
            $(".confirm>div a").click(function(){
                $('.confirm').hide()
            })

            //4444444444444444444验证码倒计时

            function invokeSettime(obj) {
                var countdown = 60;
                settime(obj);

                function settime(obj) {
                    if (countdown == 0) {
                        $(obj).attr("disabled", false);
                        $(obj).css('color', '#2cb38a');
                        $(obj).text("获取验证码");
                        countdown = 60;
                        return;
                    } else {
                        $(obj).attr("disabled", true);
                        $(obj).css('color', '#dedede');
                        $(obj).text(" 重发(" + countdown + ")");
                        countdown--;
                    }
                    setTimeout(function () {
                        settime(obj)
                    }, 1000)
                }
            }
        })
    </script>
</body>

</html>

 

蒋蒋蒋ing
关注
专栏目录
vue自定义指令-移动端点击元素input输入框垂直居中于软键盘弹出后的页面
liuhao9999的博客
04-01 4275
Vue.directive('gomiddle', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { el.addEventListener('click', function() { setTimeout(function() { let top = el.offsetTop; let windowScrollTop = documen.
flutter 学习笔记之封装一个textfield（倒计时获取验证码）
July_sal的专栏
07-08 3389
封装了一个简单的textfield： maxLength：支持设置最大输入长度 默认长度16 isInputPwd：输入密码（掩码） 默认false getVCode：获取验证码倒计时的输入框 countdown 倒计时秒数 默认60s autoFocus：是否自动获得焦点 eg:进入搜索页面 一进页面就调起键盘 keyboardType: 键盘类型 eg:TextInputType.p...
让当前的元素滚动到浏览器窗口的可视区域内
Wangdanting123的博客
02-13 1807
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView document.getElementById("abc").scrollIntoView({ behavior: "smooth", block: "start" });  在window.scrollTop不起作用的时候可以尝试这个。缺点是浏览器...
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
10-18
今天小编就为大家分享一篇解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
10-15
主要介绍了vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
安卓设备 输入框聚焦出现软键盘时input框被遮挡问题
darling5679的博客
07-27 203
安卓设备 输入框聚焦出现软键盘时input框被遮挡问题 1 var u = navigator.userAgent; 2 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 3 if(isAndroid == true){//此处为判断安卓方法（若利用mui，则判断可用 mu...
H5端关于input框输入软键盘弹起底部固定的解决方法
weixin_41612533的博客
01-10 1万+
最近工作中做了一个关于H5端的项目，用不同机型自身带的浏览器测试页面，用手机上安装的UC、QQ浏览器测试页面的兼容性，各种问题都出现了，遇到这么多的问题，头都炸毛了。不过最为严重的也就只有两个问题，关于form表单中input获取焦点的时候软键盘弹起，固定在底部的内容被弹起遮盖住了页面的内容，不符合项目的要求。不过经过测试，发现华为mate8手机自身带的浏览器解析css还算是比较严谨的，因为就他的
android中监听软键盘的弹出与隐藏，并获取软键盘的高度
10-25
总的来说，监听Android软键盘的弹出与隐藏，以及获取软键盘高度，可以通过多种方式实现，开发者应根据具体需求选择合适的方法。同时，要注意兼容不同的`windowSoftInputMode`设置，以确保在各种情况下都能正确处理...
vue input点击输入键盘顶起页面解决方案 ios
qq_29444805的博客
06-05 7392
vue ios input点击输入键盘顶起页面解决方案在所有input失去焦点的时候执行window.scroll(0, 0) 在所有input失去焦点的时候执行window.scroll(0, 0) <template> <div><input placeholder="请输入您的手机号" @blur="onBlurInput()"></div>...
Android 设置一个底部控件view随着软键盘的弹出而上移
12-15
在Android开发中，当用户在应用中输入时，软键盘的弹出可能会遮挡底部的控件，导致用户体验下降。为了改善这种情况，开发者通常需要实现一个功能，使得底部的视图（如工具栏、按钮等）能够随着软键盘的弹出而上移。...
H5的input获取焦点滚动可视区域以及失去焦点情况
Jermyo的博客
08-02 1155
其实弹框之所以影响页面布局，我碰到的一般都是因为页面时position:fixed时， 键盘一弹出，布局就乱了，我的解决方案是，首先就是把fixed尽可能的改成其他的， 接着监听窗口大小变化事件，然后处理ios兼容问题 代码 //监听窗口大小变化事件 window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ document.activeElement.scrollI
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
我总是词不达意的博客
05-25 6262
vue h5 在安卓手机端软键盘弹出顶起页面和fixed问题
input输入框聚焦时，自动滚动到屏幕顶部，让输入框定位在可见区域
热门推荐
weixin_42199992的博客
10-03 1万+
可以利用scrollIntoView()来解决： $("input").on("focus",function(){ this.scrollIntoView(); }) 介绍一下scrollIntoView()的用法： 调用方法为 element.scrollIntoView() 参数默认为true。 参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容...
在移动端输入框在软键盘弹出后位置矫正
xm的博客
07-18 6865
今天在做移动web端页面时遇到一个问题，当input框获取焦点时，弹出的软键盘遮住input框，在网上找了许多资料，终于找到解决方案 var clientHeight = document.body.clientHeight;     var _focusElem = null; //输入框焦点     //利用捕获事件监听输入框等focus动作     document.body.add
scrollIntoView
weixin_30587927的博客
10-21 231
DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在，所以它能在所有元素上使用。 1、scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者...
页面滚动到可视区域执行操作
weixin_33938733的博客
07-26 1168
写一个简单的方法，让窗口滚动到可视区域时，即时可以出现动画。 怎么写动画延迟，直接把类名添加在页面中，实现动画延时。譬如: .delay200{animation-delay:200ms} .delay500{animation-delay:500ms} <h2 class="delay500" data-animate="fadeInUp">回首向来萧瑟处，归去...
input框滚动到可视区域
To_Be_Better0822的博客
06-13 1523
scrollIntoView Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域。 兼容性：大部分的IOS，和安卓手机都支持 window.onresize = () => { const { activeElement } = document; if (activeElement.tagN...
input 使用绝对定位到页面底部 获取焦点时 软键盘弹出无法看到输入框
最新发布
05-26
解决这个问题的方法是，在软键盘弹出时将页面滚动到输入框的位置。以下是一种可能的实现方式： 1. 监听输入框的获取焦点事件（focus）。 2. 在事件处理程序中，使用JavaScript获取输入框的位置和高度。 3. 将页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值