ionic開發(fā)中點擊input時鍵盤自動彈出
更新時間：2016年12月23日 14:13:36 作者：Elain紅紅
ionic開發(fā)移動端界面時，在輸入用戶名和密碼的時候，輸入法不要擋住我的輸入框，并且輸入框往上滾動的時候，頂部標題不要上移，下面給大家分享實現(xiàn)代碼，一起看看吧
ionic開發(fā)移動端界面時，在輸入用戶名和密碼的時候，我希望輸入法不要擋住我的輸入框，并且輸入框往上滾動的時候，頂部標題不要上移，只是input內容部分往上移動，點擊密碼輸入框時我還想看見按鈕，這樣不用關閉輸入法，也可以直接點擊登錄按鈕，關閉輸入法自動恢復成默認的界面，用戶體驗不錯哦~；找了很多代碼，以下代碼是我想要的效果：
.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)
})
}
}
}
}])
效果圖：
點擊輸入框前的界面：
點擊輸入框后的界面：
以上所述是小編給大家介紹的ionic開發(fā)中點擊input時鍵盤自動彈出，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了element-ui?動態(tài)換膚,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了通過實例了解JS 連續(xù)賦值,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家介紹了JS面試之對事件循環(huán)的理解分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
下面的代碼就是判斷腳本之家是不是字符串類型的代碼2008-11-11
這篇文章主要給大家介紹了關于不用typsescript如何使用類型增強功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了兩個數(shù)組去重的JS代碼，有需要的朋友可以參考一下2013-12-12
這篇文章主要為大家介紹了ES6中解構賦值實現(xiàn)變量批量賦值解放雙手，變量的解構賦值，聽起來很復雜，簡單點說可以理解成批量操作變量賦值2022-04-04
這篇文章主要介紹了js與applet相互調用的方法,結合實例形式分析了js調用java的applet以及java調用js的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JavaScript事件,告訴大家"事件對象"的注意要點，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序常見頁面跳轉操作,結合簡單實例形式總結分析了微信小程序保留頁面跳轉、關閉頁面跳轉、返回上一級頁面等各種常見的跳轉操作實現(xiàn)技巧,需要的朋友可以參考下2019-05-05