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