angular监听移动端键盘的弹起和收回
页面的提交按钮采用的是固定定位在页面的底部,键盘弹出后,提交按钮紧挨着键盘的上方,
输入框获得焦点后,键盘弹出,并且输入框回自动定位上方的空白处,
此时由于键盘上方固定定位的提交按钮的原因有可能会遮挡住获得焦点的输入框,
从而导致用户看不见输入框,需要用户手动滑动屏幕,移动输入框的位置,才可以进行输入内容。 解决办法:
1.监听window的大小的变化,来判断键盘的弹出和收回
2.获取输入框底部的偏移位置,即输入框底部距离可见区域上面的距离A==输入框.offsetTop-屏幕卷起的高度
3.获得可见区间的高度B==window.height-提交按钮的高度
4.将AB进行比较,调整屏幕滚动的距离,从而将输入框定位到可见区域的位置,让用户可以输入
ps:如果页面当中有很多个输入框,判断什么时候进行手动设置屏幕滚动的距离
window.height-提交按钮的高度>输入框底部距离可见区域上面的距离A>window.height+输入框的高度 当输入框底部距离可见区域上面的距离A在这个范围内 都需要手动操作屏幕卷起的高度 差值==输入框底部距离可见区域上面的距离A-(window.height-提交按钮的高度)
$scope.$watch(function(){
return $window.innerHeight;
}, function(value) {
if(value< me.winH){
setTimeout(function(){
var scrollTop=parseInt($(".consultApplyScroll .scroll").css("transform").split(",")[1].slice(0,-2));
var offsetTop=$("#confirmedDate")[0].offsetTop;
var sub=((offsetTop+scrollTop)-(value-44));
var inputH=$('.textarea').eq(1).height();
sub=sub>0&&(offsetTop+scrollTop)>(value-44)&&(offsetTop+scrollTop)<(value+inputH)?sub:0;
var valuescrollTop=scrollTop-sub;
$(".consultApplyScroll .scroll")[0].style.webkitTransform="translate(0px,"+valuescrollTop+"px) scale(1) translateZ(0px)";
},500);
}else{
$sys.getScroll("consultApplyScroll").resize();
}
});
angular监听移动端键盘的弹起和收回的更多相关文章
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- DSAPI多功能组件编程应用-HTTP监听服务端与客户端_指令版
前面介绍了DSAPI多功能组件编程应用-HTTP监听服务端与客户端的内容,这里介绍一个适用于更高效更快速的基于HTTP监听的服务端.客户端. 在本篇,你将见到前所未有的超简化超傻瓜式的HTTP监听服务 ...
- DSAPI HTTP监听服务端与客户端
本文中,演示了使用DSAPI.网络相关.HTTP监听,快速建立服务端和客户端. HTTP监听服务端的作用,是监听指定计算机端口,以实现与IIS相同的解析服务,提供客户端的网页请求,当然,这不仅仅是应用 ...
- DSAPI HTTP监听服务端与客户端_指令版
前面介绍了DSAPI多功能组件编程应用-HTTP监听服务端与客户端的内容,这里介绍一个适用于更高效更快速的基于HTTP监听的服务端.客户端. 在本篇,你将见到前所未有的超简化超傻瓜式的HTTP监听服务 ...
- DSAPI多功能组件编程应用-HTTP监听服务端与客户端
本文中,演示了使用DSAPI.网络相关.HTTP监听,快速建立服务端和客户端. HTTP监听服务端的作用,是监听指定计算机端口,以实现与IIS相同的解析服务,提供客户端的网页请求,当然,这不仅仅是应用 ...
- vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...
- 50-用Python监听鼠标和键盘事件
转自:https://www.cnblogs.com/qiernonstop/p/3654021.html 用Python监听鼠标和键盘事件 PyHook是一个基于Python的“钩子”库,主要用于监 ...
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
随机推荐
- 一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
- 多线程 NSOpeartion 的使用
NSOperation简介 相对于 GCD ,具有面向对象的特征,比 GCD 更简单易用,代码可读性强 NSOperatioin 单独使用时, 不具有开辟新线程的能力, 只是同步执行操作, 需要配合 ...
- Qt 学习之路 2(29):绘制设备
Qt 学习之路 2(29):绘制设备 豆子 2012年12月3日 Qt 学习之路 2 28条评论 绘图设备是继承QPainterDevice的类.QPaintDevice就是能够进行绘制的类,也就是说 ...
- zTree学习笔记
一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...
- mfix的Negative gas density报错解决
错误很难定位,因为编译正常,而是运行过程中会告知出现Negative gas density,并且不收敛,没有其他错误信息.最后通过一步步定位发现是由于 IC_EP_g(1) < EP_star ...
- C# 由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。这个错误是什么原因引起的?
C# 由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值.这个错误是什么原因引起的? 2011-12-17 22:45 提问者: 匿名|浏览次数:6056次 我来帮他解答 图片 符号 ...
- HDU 5938 Kingdom of Obsession(数论 + 二分图匹配)
题意: 给定S,N,把S+1,S+2,...S+N这N个数填到1,2,...,N里,要求X只能填到X的因子的位置.(即X%Y=0,那么X才能放在Y位置) 问是否能够放满. 分析:经过小队的分析得出的结 ...
- .Net支持Redis哨兵模式
csredis 博客 csRedisgit地址 csRedis3.2.1 Nuget地址 (在使用csredis3.2.1获取sentinel时产生运行时异常,调查问题最后发现是获取sentinel的 ...
- pageHelper 分页插件使用
第一步:引入pageHelper的jar包. 链接:https://pan.baidu.com/s/1m3EyAmd_eoAsay0aM7uEkA 提取码:xmfi 第二步:需要在SqlMapConf ...