文档章节

移动web端键盘问题、IOS安卓机input/textarea兼容性

木子晴
 木子晴
发布于 09/09 16:22
字数 1281
阅读 22
收藏 1

前言:移动web开发中,安卓和IOS的input/textarea输入框在调用键盘是有差异的:安卓机键盘覆盖在页面底部;IOS机键盘将整个页面向顶部推。两种实现在真机上都会导致页面出现某些小问题,本篇主要作用是收录这类问题(也欢迎提供各种问题或者更好的解决方案或指出本文错误,共勉),我会持续更新陆续将遇到到或者身边人遇到的总结到这里,方便自己或者用到的人需要的时候翻出来看看。

一、IOS机

(1)问题描述:

IOS 6s手机中,获取焦点时,键盘会将整个页面向顶部推,输入完成后键盘收回但是页面还是停留在键盘拉起的状态,如下图所示:

(2)解决方案:

0.判断是否是IOS机

//判断是否是安卓还是ios
isAndroid() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    return isAndroid === true;
}

1.当输入完成(输入框失去焦点onblur)时,强制将页面置顶

//IOS 6s键盘收回
blurAddr() {
    if (isAndroid()) return;
    window.scroll(0, 0);//失焦后强制让页面归位
}

缺点:

当页面输入内容较多,页面出现滚动条时,前输入完成后页面立马置顶,如果还要继续输入其他内容,需要手动下滑找到输入框再次输入

改进:

//IOS 6s键盘收回
blurAddr() {
    if (isAndroid()) return;
   setTimeout(() => {
                        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;//当失去焦点时,获取网页卷去距离
                        window.scrollTo(0, Math.max(scrollHeight - 1, 0));//强制重置滚动位置
                    },100);
}

二、安卓机

(1)问题描述:

获取焦点时,键盘会直接从底部出来覆盖在页面上层,如果你的输入框刚好在页面下方就会被弹出的键盘遮挡,也无法向上滑动使其显示,如下图所示:

(2)解决思路:

1.使其可以向上滑动显示:

"页面根节点"设置style样式:

<section id="root" style="height:100%;overflow:auto;">
html代码布局
...
这里用textarea举例  input也是同样的
<textarea onfocus="onFocusAddr()"></textarea>
</section>

2.当输入框获得焦点时,让页面滚动条至最底部:

//安卓键盘遮挡输入
onFocusAddr() {
    if (!isAndroid()) return;//判断是否是安卓机
    setTimeout(() => {
        let div = document.getElementById("root");//获取根节点
        div.scrollTop = div.scrollHeight;//滚动条至底(这里没有写的很严谨,需要减去输入框自身高offsetHeight,效果都一样)
    }, 500);//键盘拉起的延迟时间
}

缺点:

很明显,这个方法不通用,需要给DOM节点绑定id,复用麻烦

改进:

//安卓键盘遮挡输入
onFocusAddr() {
    if (!isAndroid()) return;//判断是否是安卓机
    window.addEventListener('resize',()=>{
        setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();
//document.activeElement:文档中当前获得焦点的元素。scrollIntoViewIfNeeded():如果元素不在可见区将其滚动到浏览器窗口的可见区域,负责不动,scrollIntoView()的变体。 }, 0);//键盘拉起的延迟时间
    })
}

(3)问题解决,效果如下图:

这是原生解决,建议结合自己使用的框架做改进,如:angularJs,vue框架可以封装成指令,使用更方便,如:

vue中:

directive.js:

import tools from '../../common/utils/tools';

function directives(Vue) {
//form表单输入键盘和滚动问题的兼容性处理
    Vue.directive('compatible', (el, binding) => {
        el.onfocus = () => {
            //安卓获得焦点时键盘遮挡输入
            if (!tools.isAndroid()) return;//判断是否是安卓机
            window.addEventListener('resize', () => {
                setTimeout(() => {
                    el.scrollIntoViewIfNeeded();
                    //document.activeElement:文档中当前获得焦点的元素。
                    //scrollIntoViewIfNeeded():如果元素不在可见区将其滚动到浏览器窗口的可见区域,负责不动,scrollIntoView()的变体。
                }, 0);//键盘拉起的延迟时间
            })
        };
        el.onblur = () => {
            //IOS 6s键盘收回时强制置顶
            if (tools.isAndroid()) return;
            setTimeout(() => {
                //当失去焦点时,获取网页卷去距离
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                //强制重置滚动位置
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            } ,100);
        };
    });
//禁止输入表情
    Vue.directive('no-emoji', (el, binding) => {
        // eslint-disable-next-line no-useless-escape
        var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
        if (regStr.test(el.value)) {
            el.value = (el.value.replace(regStr, '')).trim();
        }
        el.focus();
    });
}

export default directives;

main.js:

​​​​​​​import directive from './directive/directive';
//全局引用
Vue.use(directive);

form.vue:

<input type="text"
       maxlength="11"
       placeholder="请输入手机号"
       v-compatible
       v-no-emoji 
       v-model="submitInfo.phone"
>

ng中:

directive.js:

angular.module("ngDirective", ["service"])
    //IOS 6s键盘收回时强制置顶
    .directive("toScrollTop", () => {
        return {
            controller: ["$scope", "$element", ($scope, $element) => {
                $element.bind("blur", (event) => {
                    if (comService.isAndroid()) {
                        setTimeout(() => {
                            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                        }, 100);
                    }
                });
            }
        };
    }])
    //安卓获得焦点时键盘遮挡输入
    .directive("keyboardDiscover", ["comService", (comService) => {
        return {
            controller: ["$scope", "$element", ($scope, $element) => {
                $element.bind("focus", (event) => {
                    if (comService.isAndroid()) {
                       window.addEventListener('resize', () => { setTimeout(() => { $element.scrollIntoViewIfNeeded(); }, 0);//键盘拉起的延迟时间 });
                    }
                });
            }]
        };
    }]); 

app.js:

​​​​​​​import directive from './directive/ngDirective.js';
//全局注入
angular.module("app", [
     ...
     "ngDirective"
])

form.html:

<input type="text"
       placeholder="请输入手机号"
       to-scroll-top
       keyboard-discover
       ng-model="submitInfo.phone"
       maxlength="11">

 

 

© 著作权归作者所有

木子晴
粉丝 5
博文 3
码字总数 6264
作品 0
浦东
私信 提问
移动端页面自定义input唤起键盘return,换行键为搜索

最近产品有个需求:移动端页面自定义input唤起键盘return,换行键为搜索。我的第一反应我要阻止原生的键盘弹起并且用js写一个虚拟键盘还要可以输入中文!!!想想就觉得可怕。 将input的typ...

hollyDysania
2018/12/07
0
0
使用 HTML5 input 类型提升移动端输入体验

在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎。 但是这些设备上的浏览体验,有时遗留很多的有待改进。当涉及到填写表单时,这一点尤为明显。幸运的是,HTML5规范引入了许多新...

彭博
2014/06/21
37.7K
0
常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror
2018/05/02
0
0
移动端:对高度自适应的输入框说不~

1、textarea: 核心想法: 这个方法在ios上会变得非常奇怪,因为我们使用input进行监听输入的时候,事实上他会把还没输入到屏幕上的文字还在输入法上的文字也计算在里边,所以使用input进行监听...

B_Cornelius
2018/08/27
0
0
fixed定位元素被安卓、ios键盘顶起的解决办法

问题背景: 当我们在写H5页面时经常会有fixed固定位置的元素存在,例如下图左中的"作业帮一课APP下载框",当我们input输入的时候键盘会弹起并将fixed定位的下载框顶起,如下图右,ios和安卓部分机...

JamesView
2018/07/07
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
40分钟前
3
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
41分钟前
5
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
50分钟前
5
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
56分钟前
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部