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

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是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. 日本女优插妹妹死亡写真我的极品美女上司90后美女性感性感比基尼女孩烟花妹妹无红心照片蔡依林性感www.360meimei.com

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

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

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

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