ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

在使用ionic开发IOS系统微信的时候会有一个苦恼的问题，填写表单的时候键盘会挡住输入框，其实并不算什么大问题，只要用户输入一个字就可以立刻看见输入框了。

　　可惜的是，有些客户是不讲理的，他才不管这个问题，反正就是不行，所以在一天睡觉的时候突然惊醒，想出来这个方案。

　　我就不仔细讲代码了，直接上图　　

angular.module('MyApp')
.directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPosition', function ($ionicScrollDelegate, $window, $timeout, $ionicPosition) {
return {
restrict: 'A',
scope: false,
link: function ($scope, iElm, iAttrs, controller) {
if (ionic.Platform.isIOS()) {
iElm.on('focus', function () {
var top = $ionicScrollDelegate.getScrollPosition().top;
var eleTop = ($ionicPosition.offset(iElm).top) / 2
var realTop = eleTop + top;
$timeout(function () {
if (!$scope.$last) {
$ionicScrollDelegate.scrollTo(0,realTop);
} else {
try {
var aim = angular.element(document).find('.scroll')
aim.css('transform', 'translate3d(0px,' + '-' + realTop + 'px, 0px) scale(1)');
$timeout(function () {
iElm[0].focus();
console.log(2);
}, 100)
} catch (e) {
}
}
}, 500)
})
}
}
}
}])
赞 (0)

相关推荐

  • Android 高仿微信支付数字键盘功能

    Android 高仿微信支付数字键盘功能

    现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • 微信jssdk在iframe页面失效问题的解决措施

    项目需求 微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片 遇到的问题 当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作.但是单独打开子页面可以正

  • 安卓输入框被虚拟键盘挡住的问题(微信开发)

    安卓输入框被虚拟键盘挡住的问题(微信开发)

    先通过一个页面看下事情的来龙去脉,页面如下所示: 这个页面刚好一屏幕大小,所以没有滚动条,因为"保存"键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了.苹果手机天然不会喔,苹果手机的键盘弹出来是占了下面的位置,从而把页面推了上去,整个页面就缩小了就不会出现这样的情况.安卓手机情况如下图: 我不停尝试去解决这个问题,但最终都不成功. 思考一: 如果能模仿苹果一样,当键盘弹出来的时候,将整个页面缩小成页面底部刚好贴着键

  • Android高仿微信表情输入与键盘输入详解

    Android高仿微信表情输入与键盘输入详解

    最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大

  • 微信页面弹出键盘后iframe内容变空白的解决方案

    微信页面弹出键盘后iframe内容变空白的解决方案

    当键盘弹出后,页脚也被顶起来:而当搜索完(要刷新整体页面),键盘缩回后,iframe里 键盘当住的地方变成白色. 前言: 因为iframe要适配,so,高度要计算出来 //整体高 var win = $(window).height(); //搜索栏 var header = $('header').height(); //导航栏 var nav = $('.navdivwrap').height(); //页底 var footer = $('footer').height(); //ifra

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • Android 表情面板和软键盘切换时跳闪问题的解决方法

    Android 表情面板和软键盘切换时跳闪问题的解决方法

    现在很多应用都会在让用户输入各种文本信息的时候同时多提供一个表情面板,这样就会出现一个问题,即表情面板的跳闪问题要输入文本信息,那固然是需要弹出软键盘,在软键盘显示的情况下,此时如果要切换显示出表情面板,由于表情面板不可能和用户的软键盘高度恰好一样,此外由于控件的上下移位,就会出现表情面板的跳闪现象 在点击切换按钮的时候,表情面板会先向上跳,然后再往下移,这样就会带来很差的用户体验,效果如下图所示: 这里提供一个解决方案,使软键盘和表情面板可以很自然地切换,效果如下图所示: 解决思路主要是这样:

  • iOS键盘弹出遮挡输入框的解决方法

    iOS键盘弹出遮挡输入框的解决方法

    本文为大家分享了iOS键盘弹出遮挡输入框的解决方法,供大家参考,具体内容如下 问题:输入框被键盘遮挡 期望效果:输入框位于键盘上方 解决思路: 监听键盘出现和消失的状态,当键盘出现时,当前视图上移,当输入完成收起键盘时,视图回到初始状态. 难点:视图向上平移的距离 原理都差不多,oc版参考代码: self.phoneInput = [UITextField new]; self.phoneInput.placeholder = @"请输入..."; [self.view addSubv

  • iOS新版微信底部工具栏遮挡问题完美解决

    一.问题描述: 苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用. 二.原因分析: 造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡. 三.解决方案: 了解了该问题出现的原因,我们也就有了解决办法.首先想到的方案就是控制浏览器的历史记录.由于考虑到安全性问题,浏览器的历史

  • 5种方法完美解决android软键盘挡住输入框方法详解

    5种方法完美解决android软键盘挡住输入框方法详解

    在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好.像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常满足不了需求.同时如果输入框特别多的情况下,点击输入时,当前输入框没被挡住,但是当前输入框下面的输入框却无法获取焦点,必须先把键盘收起,再去获取下面输入框焦点,这样用户体验也非常不好,那有什么办法呢?  系统的adjustResize和adjustPan有什么区别,他们使

  • Android软键盘挡住输入框的终极解决方案

    Android软键盘挡住输入框的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • 关于微信小程序bug记录与解决方法

    微信小程序bug记录 textarea 1.textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的,第二张图是在IOS真机上的.从上图可以看出来,在开发工具上显示很正常,而且没有padding,可是在真机上左上角就出现了padding,并且无论你在外部对textarea的padding做任何处理,都无法覆盖. 目前有一种解决方式是根据ios和android的不同平台来给teaxarea

  • vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    话不多说,直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种, 一种是监听页面高度(我采用的这种) 一种是监听软键盘事件(ios和安卓实现方式不同,未采用) 下面是实现代码 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.document

随机推荐