Question

我正在尝试复制Expanding Text Areas Made Elegant

基本上它解释了我们如何能够实现类似于fb注释框的内容，其大小随着文本文件而增加。

我在index.html：

中有这个

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="test.js"></script>
  </head>
  <body>
    <figure>
    <div class="expandingArea">
      <pre><span></span><br></pre>
      <textarea></textarea>
      </div>
      </figure>    
  </body>
</html>

我的test.js看起来像： enter image description here

这不起作用。但是，如果我将js文件中的所有内容移动到body中的脚本标记，那么它可以正常工作。所以我的索引文件看起来像：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">    
  </head>
  <body>
    <figure>
    <div class="expandingArea">
      <pre><span></span><br></pre>
      <textarea></textarea>
      </div>
      </figure>

 <script>
    function makeExpandingArea(container) {
      var area = container.querySelector('textarea');
      var span = container.querySelector('span');
      if (area.addEventListener) {
      area.addEventListener('input', function() {
      span.textContent = area.value;
      }, false);
      span.textContent = area.value;
      } else if (area.attachEvent) {
      // IE8 compatibility
      area.attachEvent('onpropertychange', function() {
      span.innerText = area.value;
      });
      span.innerText = area.value;
       }
      // Enable extra CSS
      container.className += ' active';
      }var areas = document.querySelectorAll('.expandingArea');
      var l = areas.length;while (l--) {
      makeExpandingArea(areas[l]);
      }
  </script>

  </body>
</html>

Answer 1

在您的浏览器中（我建议使用Chrome进行测试）打开开发人员工具（通过右键单击并选择inspect元素）并确保test.js文件的路径正确无误。通过选择＆＃39;来源＆＃39;来做到这一点。选项卡位于开发人员工具窗口的顶部，然后在源列表中选择test.js文件。

我还认为最佳做法是将您的js文件加载到Web文档的底部（在最后一个body标记之前），以确保它们在您的dom元素加载后加载。

Answer 2

您实际上并未使用onload

你的格式很混乱很难说，但你的初始代码在之后 onload函数的底部是一个while循环。

当您在任何元素存在之前将其包含在<head>中时。这就是为什么它的重要性。

Answer 3

在您的代码中尝试此操作：我在一个表中使用了一个css类“form-control”。此文本区域的属性位于侧面标签中 HTML代码：

<html>
<body>

    <table>
      <tr>
          <td>Description:</td>
          <td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
          <td></td>
      </tr>
    </table>

//css-code required inside html:
<style>
textarea.form-control {
    height: auto;
    resize: none;
    width: 300px;
}
</style>

</body>
</html>

脚本标记在html中的位置

3 个答案: