移动端输入框填坑系列(一)

作者:yana

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都是很让我们头疼的问题,那么如何使移动web的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。

一、文字输入限制问题

我们拿最多可输入16个字为例。当输入字数(注意,不是字符长度)超过16字时,会触发 tips 提示,并且不能继续输入。

办法一: textarea 可以使用 maxlength 进行输入字数限制。 但是这个办法只能单纯的限制 length ,有时并不能真正的结局问题。

办法二: 在将第二个办法之前先来讲讲下面的几种情况:

1、非直接的文字输入

什么叫做非直接的文字输入呢?

当输入汉字时必然会是非直接输入,需要我们点选才能正式输入。

当我们字数限制为16个字,需要实时检查是否到16字。输入文字时,当有非直接的文字输入时,监听 keydown 事件和 input 事件都会直接触发判断字数逻辑,会截断我们正在输入的文字。

解决办法:

监听 compositionend (当直接的文字输入时触发)这时,当没选中中文的时候不会进行字数判断。 ``

    $('#input').on('compositionend', function(e) {
        var len = $(this).val().length;
        if (len > 16) {
            // 提示超过16字
        }
    });

2、emoji 表情的输入

当输入 emoji 的时候,但是,当输入 emoji 表情的时候,js 中判断 emoji 表情的 length 为2,因此 emoji 正常应该最多只能输入8个,但是 ios 端却把 emoji 的 length 算为1,可以输入16个 emoji 。这样就导致了两端的体验不同。因此需要在 js 中来进行字数限制。

再加上汉字输入问题,那么就加入一个标记位,来判断是否是直接的文字输入。然后监听 input ,限制字数,当超过字数限制的时候,把前16个字截断显示出来就ok了。

``

var cpLock;
$('#input').on('compositionstart', function(e) {
    cpLock = true;
});
$('#input').on('compositionend', function(e) {
    cpLock = false;
});
$('#input').on('input', function(e) {
    if (!cpLock) {
        if (e.target.value.length - 17 >=0) {
            var txt = $(e.target).val().substring(0, 16);
            $(e.target).val(txt);
            // 超过16字提示
        }
    }
});

二、textarea置底展示问题

ios 中的输入体验永远伴随着一个问题,就是当唤起键盘后,整个页面会被键盘压缩,也就是说页面的高度变小,并且所有的fixed全部变为了absolute。 android效果:

使用 fixed 定位。

可见 android 中唤起键盘是覆盖在页面上,不会压缩页面。

在 ios 上的效果:

那么如果我们需要将输入框固定在屏幕下方,而当键盘被唤起同时输入框固定在键盘上方(如下图样式)该如何解决呢?

首先我们来看下 ios 的表现。

可以看出,键盘会将页面顶上去。那么如果希望可以将输入框和键盘完全贴合,我们可以使用div模拟一个假的输入框,使用定位将真正的输入框隐藏掉,当点击假的输入框的时候,将真正的输入框定位到键盘上方,并且手动获取输入框焦点。

在实现过程中需要注意下面几个问题:

1、真正的输入框的位置计算

首先记录无键盘时的 window.innerHeight,当键盘弹出后再获取当前的 window.innerHeight ,两者的差值即为键盘的高度,那么定位真输入框自然就很容易了。

2、在 ios 下手动获取焦点不可以用 click 事件,需要使用 tap 事件才可以手动触发

    ``

    $('#fake-input').on($.os.ios?'tap' : 'click', function() {
        initHeight = window.innerHeight;
        $('#input').focus();
    });

3、当键盘收起的时候我们需要将真输入框再次隐藏掉,除了使用失去焦点(blur)方法,还有什么方法可以判断键盘是否收起呢?

这里可以使用 setInterval 监听,当当前 window.innerHeight 和整屏高度相等的时候判断为键盘收起。 注意:键盘弹起需要一点时间,所以计算当前屏幕高度也需要使用setInterval。

4、因为 textarea 中的文字不能置底显示,当输入超过一行textarea需要自动调整高度,因此将scrollHeight赋值给textarea的height。当删除文字的时候需要height也有变化,因此每次input都先将height置0,然后再赋值。

    $('#textarea').css('height', 0);
    $('#textarea').css('height', $('#textarea')[0].scrollHeight);

未完待续...

原文链接:

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏新智元

【干货】谷歌 TensorFlow 工程负责人:标记大规模图片的最简方法

【新智元导读】前谷歌 TensorFlow 工程负责人 Peter Warden 和大家分享了利用 OSX 系统里的 Find 快速为大规模图片打标签,以优化深...

3519
来自专栏猿人谷

程序员需要知道的8个Linux命令

每个程序员,在职业生涯的某个时刻,总会发现自己需要知道一些Linux方面的知识。我并不是说你应该成为一个Linux专家,我的意思是,当面对linux命令行任务时...

1605
来自专栏YouMeek

1.5 Elasticsearch DSL 聚合语法介绍

课程环境 CentOS 7.3 x64 JDK 版本:1.8(最低要求),主推:JDK 1.8.0_121 Elasticsearch 版本:5.2.0 相关软...

2937
来自专栏小樱的经验随笔

CTF---隐写术入门第二题 小苹果

小苹果分值:10 来源: hanyuhang 难度:易 参与人数:2159人 Get Flag:862人 答题人数:996人 解题通过率:87% flag格...

2665
来自专栏Y大宽

ChIP-seq详细分析流程

参考生信技能树1以及生信技能树2 只记录从数据下载,到最终结果展示,具体生物学知识请自行查阅 稍后关于ChIP-seq的背景知识我会再发布一篇文章。 数据...

491
来自专栏lonelydawn的前端猿区

Vuex从入门到精通(二)

前言 在本篇,我将演示如何使用 vue-cli  ( https://github.com/vuejs/vue-cli ) Vue  ( https://cn....

2115
来自专栏施炯的IoT开发专栏

用本地代码实现屏幕方向自适应的Windows Mobile程序

    在Windows Mobile平台的应用程序开发过程中,如何处理屏幕方向改变对程序带来的影响是一个重要的问题。Allen Lee的文章《WM有约(四):...

2047
来自专栏生信宝典

富集分析DotPlot,可以服

R语言学习 - 富集分析泡泡图 刚一出品,Y叔就说有硬伤。Y叔是著名富集分析软件clusterprofiler的原创,而且软件内集成dotplot, enric...

2487
来自专栏xingoo, 一个梦想做发明家的程序员

我的AI之路 —— OCR文字识别快速体验版

还记得前一阵某小盆友拿过来一个全是图片的ppt,让我把里面的文字给抠出来(我当时很震惊!!!),随后在网上随便找了个OCR的在线文档转换软件,就给转过来了——这...

1082
来自专栏开源项目

码云推荐 | 基于 vue.js 的移动端组件库 mint-ui

升级版的mint-ui,基于vue.js,可自己拓展组件。 Installation 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使...

35310

扫码关注云+社区