Question

如何防止textarea进入页脚？

var coola = {
  init: function() {

 autosize(document.querySelectorAll('textarea'));

 $("textarea").keyup(function(e) {
    //Tried a hack for not autogrow below footer
    $('.footer').focus();
    $(this).focus();
  });

  } 
};
$(coola.init);

插件：http://www.jacklmoore.com/autosize

注意：没有固定的Rows和Cols允许使用textarea。

注意：不允许固定高度。我希望在文本增加时调整大小并调整大小。

Answer 1

页脚位于内容之上，因为它是position: fixed。当文本区域自动调整大小时，它也会增加父div的大小。你可以看到隐藏＆＃39; textarea向下滚动。

我建议添加一些代码，每次为受影响的textareas触发调整大小时，将屏幕向下滚动一行的高度。

Answer 2

将padding-bottom:80px添加到主div。所以它在底部有更多的空间，你的textarea不会隐藏在页脚中。

<div style="width: 100%; margin-left: auto; margin-right: auto; padding-bottom:80px">
  <textarea id="text1"></textarea>
  </br>
  </br>
  </br>
  </br>
  </br>
  <textarea id="text2"></textarea>
  </br>
  </br>
  </br>
  </br>
  </br>
  <textarea id="text3"></textarea>
</div>
<div class="footer">
  I am a cool footer & I hide autosizing textareas behind me :p. <br>
  If you have guts then Comeon solve the issue
</div>

如何防止自动调整textarea进入具有固定/ Z-Index页脚的页脚？

2 个答案: