(移动端)移动端问题整理(输入法，字符截断，禁止页面滚动)
这篇文章主要整理一下这次移动端项目中遇到的一些问题，以及相应的解决方案。闲话不多说了，看问题！
-
手机上输入内容的长度截断
具体的需求是这样的，输入框输入的字母和汉字都不能超过 7 个，而且需要实时判断，超过限制就截断，并弹出提示弹窗。
原本计划的解决方案：
通过Html5的oninput对输入框的内容进行监听，同时动态计算输入内容的长度(由于这里对汉字和字母的长度做了统一要求，都是7，所以这里只是简单计算了字符串的长度，并没有针对字符长度进行计算，PS: 一个中文字符长度为2，一个英文字母字符长度为1)。
然后如果得到的长度超过7，我就对接下来输入的内容进行判断，如果是删除按钮，就允许输入；否则就禁止用户的输入，我是用的是 return false;
但是理想很丰满啊，return false 这里并不起作用，并不能阻止用户的默认输入行为。至于这里为什么不起作用，还没有搞懂，各位要是知道，不妨提点一下啊！
于是想到了字符串的截取，具体就一行代码
this.value = this.value.substr(0, 7); -
手机上中文输入法的虚拟拼音也被 oninput 事件监听
上面的问题搞定了英文字母的输入，但是手机上中文输入的时候，输入法会自动提供虚拟拼音。由于前面的字符截断，使得输入的中文 比如 "黄晓明"，虚拟拼音却是huang'xiao'ming 这里就超过了 7，结果就出现了提示弹窗，以及字符截断。。。。
于是就百度到了 compositionstart, compositionend 这两个事件！他们能够判断到中文输入开始和结束，这里主要参考了 手机上限制字符长度的正确姿势
和 经验总结：应对中文输入法的字符串截断方案（带代码示例）具体解决方案，两篇文章介绍的很详细，我就不多介绍了。这里发下，我和他们差不多的处理代码吧，主要就是参考了他们代码，才使得我的项目问题得到解决。
$( '.input').on( 'input', function( e ) { if ( $( this ).attr( 'inputstart' ) === 'no' ) { return false; } $( '.sure' ).attr( 'lengthok', 'yes' ); if( getTextLength( this.value ) > 7 ) { if ( e.keyCode !== 8 ) { $( '.tiptext' ).html( '关键词长度不能超过7' ); $( '.tip' ).show(); setTimeout( function(){ $( '.tip' ).hide(); }, 1500 ); this.value = this.value.substr( 0, 7 ); } } } ).on( 'compositionstart', function() { // 判断中文输入开始 $( this ).attr( 'inputstart', 'no' ); } ).on( 'compositionend', function() { // 判断中文输入结束，在此期间不触发 input 事件 $( this ).attr( 'inputstart', 'yes' ); } ); -
禁止页面的全局滚动
移动端页面交互，通常有弹出层，背景需要遮罩。但出现这样情景的时候，我们其实应该禁止页面的整体滚动。
关于这一点，刚开始我还没考虑太好，但和组里的同事请教，才明白！
出现弹出层，我们是希望用户关注弹出层的内容和交互，所以用户不应该还能滚动遮罩层后面的内容。通过这个问题，我想我们平常做项目，实现交互的时候，其实除了沟通正常需求之外，还应该多站在用户的角度去思考问题。
这个问题比较容易解决，当出现弹出层的时候，我们设置
document.addEventListaner('touchmove',stopTouchMove,false);当弹出层被关闭的时候，再设置
document.removeEventListaner('touchmove',stopTouchMove,false);这里还有一个小知识点，就是 removeEventListaner 这个事件，必须传入函数名，而不是具体的匿名函数才能正确执行。
所以我们加一个处理函数就可以function stopTouchMove( e ) { e.preventDefault(); }
### 今天就先写到这里了，后面要是还有其他的问题，我再来更新
更新，因为出现了新的问题，和新的解决方案
之前写的处理滚动方案，太简单了，随后我就遇到了更加复杂的问题，这里再做一下补充。。。
我们上面 3中的解决方案，遇到这种情况就不使用了。。。
图片来自http://www.haorooms.com/post/webapp_bodyslidebcdiv
因为3中的解决方案，会使得全局禁止滑动，这样容器自身的滑动也不能实现了。因为我要处理的弹层是需要底部固定的，所以。。。
第一种思路
它来自于 移动端的touch事件处理，可以利用 event 这个工具去计算滑动的方向以及距离，当比如滑动到这部分的最上边和最下边的时候就有
event.preventDefault()
来组织容器内部的滑动。
这里我使用的思路和这个文章写的一样，但是具体 event 的用法不太一样，因为直接 event.pageY 这样使用会报错 undefined 的 所以，我列出一下我的代码
var start_pos;
$( '.container' ).on( 'touchstart', function( e ) {
var touch = e.targetTouches[0];
start_pos = touch.pageY;
} ).on( 'touchmove', function( e ) {
var touch = e.targetTouches[0];
var down_or_up = ( touch.pageY - start_pos > 0 );
var top_distance = $( this ).scrollTop();
if ( down_or_up && top_distance <= 0 ) {
e.preventDefault();
}
} );
这里能够实现容器内部滑动顶部和底部禁止页面滚动，但是滑动容器过程中，如果我滑动遮罩层，还是能够上下滑动我的页面，因为我的页面高度一屏不够的，所以会看到我的弹层也在上下滑动。。。所以这种方案我并不适用
说说最终解决方案
看到了这个提问，移动端禁止遮罩层以下屏幕滑动，给我提供了一种新奇的思路，出现弹层的时候，设置页面最外层容器，也就是 body 内的第一层容器为 position fixed，取消弹层的时候，再修改为 position absolute 或者 relative 。这种方式果然一下就搞定了，由于外层都固定了，所以里面的容器自己滑动也不会影响整个页面的滑动了。
仔细想想，还是我的思路一直定位在了js 通过 e.preventDefault() 或 3中的解决方案。
其他遇到的问题有
输入框，一定要多考虑特殊的输入，比如空格啊，特殊字符啊！！！等等。。
输入框，一定要多考虑特殊的输入，比如空格啊，特殊字符啊！！！等等。。
输入框，一定要多考虑特殊的输入，比如空格啊，特殊字符啊！！！等等。。
