如何使用chrome应用程序窗口动态调整文本区域的大小

how could I make a textarea dynamically resize with the chrome app window?

本文关键字：区域 文本 调整 动态 何使用 chrome 应用程序 窗口      更新时间：2023-11-12

我一直在尝试制作一个完全由文本区域填充的chrome应用程序，我想让该文本区域随应用程序窗口动态调整大小。我从来都不想使用任何外部库，例如jquery。

我的html是：

<!DOCTYPE html>
<html>
  <head>
    <title>Plain Spellcheck</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <textarea id="textarea" spellcheck="true" class="textarea"></textarea>
  </body>
</html>

我还没有找到任何有用的css，所以我不会发布实际上是空的样式表。

我的无功能且公认有缺陷的代码是：

function windowHeight(){
  var mainWindow = chrome.app.window.get("mainWindow");
  var height = mainWindow.innerBounds.height;
  var textarea = document.getElementById("textarea");
  var newHeight = parseInt(height);
  var fixedHeight = newHeight * 0.04;
  var height = newHeight - fixedHeight;
  var height = height.toString();
  textarea.style.height = height + "px";
}
document.addEventListener("DOMContentLoaded", function(){
  var target = window.innerHeight;
  var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
      chrome.app.window.onBoundsChanged.addListener(windowHeight());
    });
  });
  var config = {attributes:false, childList:false, characterData:true};
  observer.observe(target,config);
});

CSS:

html, body, #textarea
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
相关文章：