TAT.yana 移动端输入框填坑系列(一)
In Web开发 on 2017年03月21日 by view: 8,723
20

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

一、文字输入限制问题

我们拿最多可输入16个字为例。当输入字数(注意,不是字符长度)超过16字时,会触发tips提示,并且不能继续输入。
办法一:
textarea可以使用maxlength进行输入字数限制。
但是这个办法只能单纯的限制length,有时并不能真正的结局问题。
办法二:
在将第二个办法之前先来讲讲下面的几种情况:
1、非直接的文字输入
什么叫做非直接的文字输入呢?

当输入汉字时必然会是非直接输入,需要我们点选才能正式输入。
当我们字数限制为16个字,需要实时检查是否到16字。输入文字时,当有非直接的文字输入时,监听keydown事件和input事件都会直接触发判断字数逻辑,会截断我们正在输入的文字。
解决办法:
监听compositionend(当直接的文字输入时触发)这时,当没选中中文的时候不会进行字数判断。

2、emoji表情的输入
当输入emoji的时候,但是,当输入emoji表情的时候,js中判断emoji表情的length为2,因此emoji正常应该最多只能输入8个,但是ios端却把emoji的length算为1,可以输入16个emoji。这样就导致了两端的体验不同。因此需要在js中来进行字数限制。
再加上汉字输入问题,那么就加入一个标记位,来判断是否是直接的文字输入。然后监听input,限制字数,当超过字数限制的时候,把前16个字截断显示出来就ok了。

二、textarea置底展示问题

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

使用fixed定位   
可见android中唤起键盘是覆盖在页面上,不会压缩页面
在ios上的效果:

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

首先我们来看下ios的表现

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

在实现过程中需要注意下面几个问题:
1、真正的输入框的位置计算
首先记录无键盘时的window.innerHeight,当键盘弹出后再获取当前的window.innerHeight,两者的差值即为键盘的高度,那么定位真输入框自然就很容易了
2、在ios下手动获取焦点不可以用click事件,需要使用tap事件才可以手动触发

3、当键盘收起的时候我们需要将真输入框再次隐藏掉,除了使用失去焦点(blur)方法,还有什么方法可以判断键盘是否收起呢?
这里可以使用setInterval监听,当当前window.innerHeight和整屏高度相等的时候判断为键盘收起。
注意:键盘弹起需要一点时间,所以计算当前屏幕高度也需要使用setInterval
4、因为textarea中的文字不能置底显示,当输入超过一行textarea需要自动调整高度,因此将scrollHeight赋值给textarea的height。当删除文字的时候需要height也有变化,因此每次input都先将height置0,然后再赋值。

    

未完待续…

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/03/moves-the-input-box-fill-series-a/

  1. helvinliao 2017 年 4 月 23 日

    :mrgreen: 不愧是见过最漂亮web前端…

  2. 小海胆 2017 年 4 月 6 日

    大妹子,window.innerHeight在Android下会变,IOS不变,只是盖在上面,而input/textarea获得焦点后,会尽可能顶到window的顶部。
    ios真是奇葩

  3. 斩月 2017 年 4 月 5 日

    如楼下所说,ios键盘唤起innerHeight并没有改变,而是安卓改变了,但ios的确是压缩了页面

  4. Brian 2017 年 3 月 31 日

    在ios下,键盘出现和没出现window.innerHeight是没变化的。android就不清楚。

  5. kid 2017 年 3 月 28 日

    input 只能输入数字 怎么很好的兼容ios和安卓呢?

    • kidney 2017 年 3 月 30 日

  6. hank 2017 年 3 月 28 日

    帮我了大忙

  7. 旧城Cafe 2017 年 3 月 27 日

    虽然这篇文章说的是移动端的事情,但我还是想说一下一段代码在桌面端的问题。就是上面用 cpLock 来进行中英文混合输入然后可以判断长度的代码。这段代码在 Chrome 最新版本下(其他版本没有求证)是有问题的,因为 input 事件在 compositionend 事件之前触发,虽然在移动端上是没有问题(测试是使用移动端的 Chrome),但是如果改成桌面移动端通用的代码会更好。

  8. sRect 2017 年 3 月 24 日

    上面文字输入限制问题,不用jQuery,下面这样写,在ios里输入中文时,就不起作用了,哪里出问题了?var input = document.querySelector(“#input”); var cpLock; input.addEventListener(“compositionstart”,function(e){ cpLock = true; });input.addEventListener(“compositionend”,function(e){ cpLock = true; });input.addEventListener(“input”,function(e){ e.stopPropagation(); e.preventDefault(); if (!cpLock) { if (e.target.value.length – 5 >=0) { var str = e.target.value.substring(0, 4); e.target.value = str; console.log(“超过字数”); } } });

  9. 请求支援 2017 年 3 月 24 日

    请求支援:上面的文字输入限制问题var input = document.querySelector(“#input”);var cpLock;input.addEventListener(“compositionstart”,function(e){ cpLock = true;});input.addEventListener(“compositionend”,function(e){ cpLock = true;});input.addEventListener(“input”,function(e){ e.stopPropagation(); e.preventDefault(); if (!cpLock) { if (e.target.value.length – 5 >=0) { var str = e.target.value.substring(0, 4); e.target.value = str; console.log(“超过字数”); } }});在IOS下输入中文就不能限制了,而用jQuery没问题,究竟是哪出问题了?

  10. lusyn 2017 年 3 月 23 日

    对于“在ios下手动获取焦点不可以用click事件,需要使用tap事件才可以手动触发”,我经过测试发现trigger无论是tap还是click都是不行的,只有真正click在回调中focus唤起软键盘,而tap仍然是不行的。请确认一下。

    • 武汉大魔王 2017 年 5 月 20 日

      input外部加个div什么的可以间接实现input聚焦

  11. lusyn 2017 年 3 月 23 日

    经过测试,发现在ios下手动触发tap是没办法唤起软键盘的,反而click是可以唤起的。我说的手动触发tap、click是指真实的tap、click行为不是trigger(‘click’)。请确认

  12. sRect 2017 年 3 月 23 日

    喜欢这样的干货,期待(二)

  13. 可口渴了 2017 年 3 月 22 日

    能否抽象出一个until,似的体验,兼容性得到最大满足

  14. 超级木木 2017 年 3 月 21 日

    我的疑问似乎和题目不相关了,但还是想问问一下,如此这样限制用户输入,必然会带来一个交互体验的巨大问题,很多时候用户用input做粘贴框,粘贴之后编辑一下,比如删除一些信息,那么这种情况怎么解决呢?虽然,这和程序设计本身并不相关了,但我仍然感觉非常困扰。。。。其实日常的开发中很多程序的设计问题都是和需求、体验息息相关的,实难拆分

    • 邓映山 2017 年 3 月 23 日

      这个其实交互设计的问题,可以使用颜色和下划线标注超出的文案,以便用户进行调整。

    • TAT.yana

      TAT.yana 2017 年 3 月 23 日

      我这里用的是substring截取前十六个字的方法,所以如果是粘贴,会只保留前面限制的字数。如果需要粘贴以后编辑再来限制字数这样的交互体验只能靠禁止进行下一步操作来提示超限,实时监控字数和粘贴编辑的体验放在一起还是有些难操作

  15. 热血洒红尘 2017 年 3 月 21 日

    这里有个问题,当用户在输入状态滚动页面怎么办,定位还是会被滚动上去的

    • TAT.yana

      TAT.yana 2017 年 3 月 27 日

      这个问题我研究下,后面会写文章~

发表评论