使用scrollTop(）解決IOS中輸入法遮擋輸入框問題

更新時間：2017年09月27日 14:03:14 作者：背包里的護(hù)身符

ios瀏覽器上輸入法會彈出遮擋輸入框問題，下面小編給大家分享scrollTop(）解決IOS中輸入法遮擋輸入框問題，一起看看吧

經(jīng)過測試，發(fā)現(xiàn)有的IOS瀏覽器上輸入法會彈出遮擋輸入框，網(wǎng)上很多都是介紹用以下方法

(function() { 
$(‘input').on(‘click', function () { 
var target = this; 
// 使用定時器是為了讓輸入框上滑時更加自然 
setTimeout(function(){ 
target.scrollIntoView(true); 
},100); 
});

但是由于本人對scrollIntoView的理解不夠一直沒有解決問題，后來用相同的思路使用scrollTop()解決了。

實例如下

<script language="javascript">`
$('#messageInput').on('click', function() {
// 使用定時器是因為輸入法的彈出會改變body的高度，所以延時1秒等輸入法彈出后再定位到滾動條底部
    setTimeout(function() {
     $('body').scrollTop($('body')[0].scrollHeight);
    }, 1000);

});
</script>
<body>
<input type="text" id="messageInput" placeHolder="請輸入文字" />
</body>

總結(jié)

以上所述是小編給大家介紹的使用scrollTop(）解決IOS中輸入法遮擋輸入框問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

iOS中設(shè)置圓角的幾種方法示例
這篇文章主要介紹了iOS中設(shè)置圓角的三種方法，其中包括使用layer屬性、使用繪圖設(shè)置圓角以及通過另一張mask圖創(chuàng)建新圖，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-03-03
詳解IOS圖片壓縮處理
在日常IOS開發(fā)中，感覺圖片尺寸太大，想壓縮成小一點像素的。那么該如何做呢？本文通過“壓縮”兩個概念及實例來告訴大家如何進(jìn)行圖片壓縮處理才是最好的。
2016-07-07
React Native學(xué)習(xí)教程之自定義NavigationBar詳解
這篇文章主要給大家介紹了關(guān)于React Native學(xué)習(xí)教程之自定義NavigationBar的相關(guān)資料，文中通過是示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-10-10
IOS 中UIKit-UIPageControl利用delegate定位圓點位置
這篇文章主要介紹了IOS 中UIKit-UIPageControl利用delegate定位圓點位置的相關(guān)資料,需要的朋友可以參考下
2017-04-04
iOS中使用MD5加密字符串
本文主要給大家講解的是在IOS中MD5的加密方式，及詳細(xì)使用方法。有需要的小伙伴可以參考下
2016-06-06
iOS高仿微信表情輸入功能代碼分享
最近項目需求，要實現(xiàn)一個類似微信的的表情輸入功能，今天小編抽空給大家分享iOS高仿微信表情輸入功能代碼，非常不錯，感興趣的朋友參考下吧
2016-11-11
ios中圖像進(jìn)行壓縮方法匯總
在Iphone上有兩種讀取圖片數(shù)據(jù)的簡單方法: UIImageJPEGRepresentation和UIImagePNGRepresentation. UIImageJPEGRepresentation函數(shù)需要兩個參數(shù):圖片的引用和壓縮系數(shù).而UIImagePNGRepresentation只需要圖片引用作為參數(shù).
2015-05-05
iOS 通用鏈接（Universal Link）配置詳解
這篇文章主要介紹了iOS 通用鏈接（Universal Link）配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
iOS 8使用UIBlurEffect實現(xiàn)毛玻璃特效
這篇文章主要為大家詳細(xì)介紹了iOS 8使用UIBlurEffect類和UIVisualEffectView類實現(xiàn)毛玻璃特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
iOS如何將UIButton中的圖片與文字上下對齊詳解
對于UIButton實現(xiàn)上顯示圖片,下顯示文字這個需求估計各位iOS開發(fā)者們都不陌生，所以下面這篇文章主要給大家介紹了關(guān)于iOS如何將UIButton中圖片與文字上下對齊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-10-10