提问人:Helgeduelbeck Prabu 提问时间:8/19/2023 更新时间:8/19/2023 访问量:17
我需要有关jquery的帮助,以便在出现移动虚拟键盘时降低Chrome和Edge上$(document).height()的高度,例如在Firefox和Opera上
I need help on jquery to reduce the height of $(document).height() on Chrome and Edge when mobile virtual keyboard appears, like on Firefox and Opera
问:
我的问题 当移动虚拟键盘出现在移动浏览器上时,滚动应该只在文本区域编辑器中处于活动状态,而不是整个 html 页面。 我做了什么来解决这个问题,仅在Firefox和Opera上取得了成功。Chrome 和 Edge 什么也没发生。 我需要帮助。
我这样做了:
**HTML**
<body>
<div style="height:100px;">
<label id="info" style="display:none"></label>
</div>
<div style="position: fixed;top:101px;width:100%;" >
<textarea id="chaptercontent"></textarea>
</div>
</body>
**Jquery**
<script type="text/javascript" charset="utf-8">
var initialHeight = window.visualViewport.height; // initial height at first sight
var headerDiv = 100; // prepare div for header
var textareaHeight = Math.round( initialHeight - headerDiv ); // textarea's height formula
var virKeyb = 0; // virtual keyboard's height when hide
$(document).ready(function(){
infoStat(); // info for all height status
$(window).resize(function(){
var toxHeight = window.visualViewport.height - 100; // current textarea's height
$('.tox-tinymce').css({'height':toxHeight}); // change current textarea's height
virKeyb = Math.round( initialHeight - window.visualViewport.height );
if(virKeyb > 150){ // found virtual keyboard's height, assuming more than 150 pixel
$('body').css({'height':'100%'}); // refresh the body's height to adapt
document.body.style.height = toxHeight + 100 + 'px'; // another way to recalc doc's height
// if doc height > win height
if($(document).height() > window.visualViewport.height){ // if doc's height still more height than viewport height
// don't know next
}
} else $('body').css({'height':'100%'}); // refresh body's height when viewport change size
infoStat();
});
});
tinymce.init({
selector: '#chaptercontent', width: '100%', height: textareaHeight,
});
function infoStat(){
$("#info").html('winWidth:' + Math.round(window.visualViewport.width) + ';winHeight:' +
Math.round(window.visualViewport.height) + '\r\ntxtHeight:'+textareaHeight+';txt:'+
Math.round($('.tox-tinymce').height()) +
';doc:'+$(document).height() + ';virKeyb:'+virKeyb);
$("#info").show();
}
</script>
答: 暂无答案
评论