ホームページ > 記事 > ウェブフロントエンド > jsでソフトキーボードが入力ボックスをブロックしてしまう問題を解決する方法
jsでソフトキーボードが入力ボックスをブロックしてしまう問題を解決する方法
- 亚连オリジナル
- 2018-06-19 17:12:292603ブラウズ
以下に、ソフトキーボードが入力ボックスをブロックする問題に対する js 解決策をお勧めします。これは良い参考値であり、皆さんのお役に立てれば幸いです。
体験記
ソフトキーボードがポップアップすると、iOS側の
$('body').scrollTop()が変化します
$(window).height() Android側が変わります
キーボードを引き上げるのは一瞬ではありませんが、緩和プロセスがあります
問題が再発します
iOS側では、入力メソッドが入力をブロックする問題がよく発生します図に示すように、ボックス (特に上部が白い入力メソッド、Baidu 入力メソッドなど):
問題解決策
入力ボックスの後にタイマーを開始するだけで済みます。にフォーカスして $('body').scrollTop(1000000 ) を実行すると、本文全体が下までスクロールされるので、自然に入力ボックスが表示されます。詳しくは、次のサンプルを確認してください
サンプルソースコード。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: 0;
}
input {
font-size: 14px;
box-sizing: border-box;
width: 50%;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<p class="bottom">
<input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
<input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
</p>
</body>
<script>
$(function() {
// 解决输入法遮挡
var timer = null;
$('.bInput').on('focus', function() {
clearInterval(timer);
var index = 0;
timer = setInterval(function() {
if(index>5) {
$('body').scrollTop(1000000);
clearInterval(timer);
}
index++;
}, 50)
})
});
</script>
</html>以上、皆様のお役に立てれば幸いです。
関連記事:
vue vuex vue-rouert 権限ルーティング (詳細なチュートリアル)
Angular で orderBy 並べ替えとファジー クエリを実装する方法
以上がjsでソフトキーボードが入力ボックスをブロックしてしまう問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。