Question

我一直在努力制作一个完全由textarea填充的Chrome应用程序，我想通过应用程序窗口使textarea动态调整大小。我不想如何使用任何外部库，例如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);
});

Answer 1

CSS：

html, body, #textarea
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

如何使用chrome应用程序窗口动态调整textarea的大小？

1 个答案: