移动端web开发时，input等输入框在安卓和iso中都有问题，分别有：
1.iso不能点击其他区域使得输入框失去焦点
2.iso输入框失去焦点后，键盘产生的空白部分不消失
3.安卓端输入框得到焦点后，输入框不会自动跳转到可视范围

以下是我写的一个案例，对这些问题进行解决。使用vue编写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no">
</head>
<body>
<div id="app">
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <form action="" id="register">
        <div class="sgqformline">
            <div class="con infoitem">
                <div id="acName" class="inputBox">
                    <input type="text" name="name" placeholder="请输入您的真实姓名"   @focus="isohide($event)" @blur="isoshow($event)" maxlength="40">
                </div>
            </div>
            <div class="wrong_tips"></div>
        </div>
        <div class="sgqformline">
            <div class="con infoitem">
                <div id="acMobile" class="inputBox">
                    <input type="tel" name="mobile" placeholder="请输入手机号"  @focus="isohide($event)" data-reg="tel"  maxlength="11" @blur="isoshow($event)">
                </div>
            </div>
            <div class="wrong_tips"></div>
        </div>
    </form>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var iso = false;
    var nowinput = null;
    var myAPP;
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    };
    if(browser.versions.ios){
        iso = true;
    }
    function docTouchend (event){
        if (!(event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA')) {
//        如果点击的不是input或者textarea，让iso中输入框失去焦点
            if (iso) {
//                延时时间和移动距离可以调整
                setTimeout(function(){
                    nowinput.blur(); //解决iso不能点击其他区域使得输入框失去焦点
                    window.scrollBy(0,10); // 解决iso失去焦点键盘占据空白不消失
                    document.removeEventListener('touchend', docTouchend,false);
                }, 300);
            }
        } else {
            if (!iso) {
//                解决安卓机再次点击输入框（输入框已获得焦点），输入框不在可视区域
                if (nowinput === event.target) {
                    setTimeout(function () {
                        event.target.scrollIntoView();
                    },400)
                }
            }
        }
    };
    myAPP = new Vue({
        data: function () {
            return{
            }
        },
        methods: {
            isohide: function (e) {
                nowinput = e.target;
                document.addEventListener("touchend", docTouchend, false);
                if (!iso) {
//                    解决安卓机点击输入框后，输入框不在可视区域的问题
                    setTimeout(function () {
                        e.target.scrollIntoView();
                    }, 400);
                }
            },
            isoshow: function (e) {
                document.removeEventListener('touchend', docTouchend,false);
                if (iso) {
                    // 解决iso失去焦点键盘占据空白不消失
                    window.scrollBy(0,1);
                }
            }
        },
        mounted: function () {
        },
        filters: {

        }
    })
</script>
</body>
</html>

移动web开发中input等输入框问题的更多相关文章

  1. Web 开发中 9 个有用的提示和技巧

    在本文中,我们给出 9 个有用的 HTML.CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开 ...

  2. 第123天：移动web开发中的常见问题

    一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...

  3. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  4. Web开发中设置快捷键来增强用户体验

    从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...

  5. web开发中的安全问题

    web开发中很多东西由前段来负责判断,比如常见的邮箱 电话号码,前端判断到不是一个正确的格式,在你点击提交时候提示你格式填错了,然后不请求后端php,直到你填写正确的格式为止.这种其实可以修改js或者 ...

  6. web开发中经常使用的js

    将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...

  7. Python Web开发中的WSGI协议简介

    在Python Web开发中,我们一般使用Flask.Django等web框架来开发应用程序,生产环境中将应用部署到Apache.Nginx等web服务器时,还需要uWSGI或者Gunicorn.一个 ...

  8. 详细阐述Web开发中的图片上传问题

    Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...

  9. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

随机推荐

  1. python生成excel测试数据

    在功能测试时,经常会测到excel文件导入导出的功能,导入与导出时,需要测试系统单次导入大批量数据时是否正常, 如果系统承受不起太大的数据导入,则需要开发限制单次导入的数量,以防止系统服务异常.大量的 ...

  2. 洛谷P4051 字符加密 [JSOI2007] SA

    正解:SA 解题报告: 传送门! 和工艺那题有点儿像鸭,,,反正肯定就都想到倍长然后SA拍个序嘛先 然后就做完了,,,我发现SA的题刷起来特别susi,,,基本上紫题级别的都just一个模板就欧克了最 ...

  3. numpy交换列

    x = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]) print(x) x = x[:, [1, 0, 2]] print(x) 输出 [[1 2 3] [4 ...

  4. JMeter+Ant-自动发送测试结果报告邮件

    build.xml文件 将这三个jar包(activation.jar.commons-email-1.2.jar.mail.jar)放到ant下的lib下 (我的是:/usr/local/Cella ...

  5. 利用AMPScript获取Uber用户数据的访问权限

    现代项目开发和资产管理方法正在不停地快速变化.在这场创新和扩张的竞赛中,新资产被迅速部署并暴露于公共互联网,已有资产也在不断发展. 要跟上这个不断变化的攻击面是很难的,更不用说保护这些应用程序和系统了 ...

  6. weixin://connectToFreeWifi/协议如何跳转到微信客户端打开在wifi指定任意网页？

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. Go 初体验 - 并发与锁.3 - 竞态

    竞态,就是多个协程同时访问临界区,由并发而产生的数据不同步的状态. 这个说的有点low,没办法,我就是这么表达的,官方的请度娘. 先上代码: 输出: 为何不是1000?就是因为竞态,发生竞态后,最终的 ...

  8. 最新阿里云服务器免费SSL证书配置HTTPS的两种方法（图文教程二）

    在大家学习如何利用免费SSL证书配置网站HTTPS之前,我们先要搞清楚为什么要开启HTTPS,这个绿色的小锁真的有用吗?所谓的HTTPS其实是(安全套接字层超文本传输协议)是以安全为目标的HTTP通道 ...

  9. Unityd外发光Shader Lab

    Shader "Faye/OutLightting" { Properties { _MainTex("Texture (RGB)", 2D) = " ...

  10. t-SNE完整笔记

    http://www.datakit.cn/blog/2017/02/05/t_sne_full.html t-SNE(t-distributed stochastic neighbor embedd ...