我需要有关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

提问人:Helgeduelbeck Prabu 提问时间:8/19/2023 更新时间:8/19/2023 访问量:17

问:

我的问题 当移动虚拟键盘出现在移动浏览器上时,滚动应该只在文本区域编辑器中处于活动状态,而不是整个 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>

JavaScript jQuery 谷歌浏览器

评论


答: 暂无答案