ionic在開發(fā)ios系統(tǒng)微信時鍵盤擋住輸入框的解決方法(鍵盤彈出問題)
更新時間：2016年09月06日 14:33:10 作者：寂寞的天空GM
在使用ionic開發(fā)ios系統(tǒng)微信的時候遇到一個bug，在填寫表單的時候鍵盤會擋住輸入框。下面小編給大家?guī)砹薸onic在開發(fā)ios系統(tǒng)微信時鍵盤擋住輸入框的解決方法(鍵盤彈出問題)，非常不錯，有需要的朋友參考下吧
在使用ionic開發(fā)IOS系統(tǒng)微信的時候會有一個苦惱的問題，填寫表單的時候鍵盤會擋住輸入框，其實并不算什么大問題，只要用戶輸入一個字就可以立刻看見輸入框了。
可惜的是，有些客戶是不講理的，他才不管這個問題，反正就是不行，所以在一天睡覺的時候突然驚醒，想出來這個方案。
我就不仔細講代碼了，直接上圖
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)
})
}
}
}
}])
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js判斷兩個數(shù)組是否存在相同元素的四種方法,js中是不能直接用==或者===來計算兩個數(shù)組是否相等的,那么就需要對數(shù)組的值進行比較,需要的朋友可以參考下2023-07-07![淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]](http://img.jbzj.com/images/xgimg/bcimg1.png)
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問題時偶然看到的一段代碼2008-02-02
innerHTML在Mozilla Firefox和Opera下執(zhí)行的一個特例情況。
innerHTML在Mozilla Firefox和Opera下執(zhí)行的一個特例情況。...2007-01-01
這篇文章主要介紹的是一個js確認刪除對話框適用于a標簽及submit，非常好用，需要的朋友不要錯過2014-07-07
這篇文章主要給大家介紹了關(guān)于VSCode中如何利用d.ts文件進行js智能提示的相關(guān)資料，文中通過圖文以及示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2018-04-04
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)音樂播放器，支持循環(huán)、隨機播放，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
純js實現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀑布流布局，及ajax動態(tài)新增數(shù)據(jù)的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript設(shè)計模式中的橋接和中介者模式，橋接設(shè)計模式是一種偏向于組合的設(shè)計模式，而非繼承的設(shè)計模式，實現(xiàn)的細節(jié)從一個模塊推送給另一個具有單獨模塊的對象，而中介者設(shè)計模式是指通過一個中介者對象封裝一系列的對象交互2022-06-06
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實現(xiàn)所需要的功能,需要的朋友可以參考下2021-06-06
JavaScript獲取網(wǎng)頁中第一個鏈接ID的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁中第一個鏈接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以參考下2015-04-04