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

作者: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 条评论
登录 后参与评论

相关文章

来自专栏欧阳大哥的轮子

iOS的MyLayout布局系列-流式布局MyFlowLayout

     在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父...

1023
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

3445
来自专栏张伟博客

多合一收款二维码合并原理及源码-支持支付宝、微信、QQ

最近去超市看到好多商户一个二维码同时支持支付宝、微信、QQ扫描付款,所以回来自己上网研究了一下。整理了一个现成的源码,有需要的朋友可以下载自己研究下。

1313
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

19610
来自专栏沈唁志

YII2框架访问gii、debug页面404的错误解决方法

之前在介绍Yii框架的时候就说过 Yii 支持 gii 功能, gii 去自动生成 Web 站点常用功能的代码,也就是我们经常说的 CURD 操作,增删改查。使...

1142
来自专栏从零开始学 Web 前端

CSS相关知识点

4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。

674
来自专栏HTML5学堂

浮动之后的那些事儿 - 清浮动操作

本文内容概要: 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签...

3668
来自专栏十月梦想

浮动

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

572
来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

753
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

2906

扫码关注云+社区