如何防止autosize textarea進入帶有固定/ Z-Index頁腳的頁腳？

如何防止textarea進入頁腳？如何防止autosize textarea進入帶有固定/ Z-Index頁腳的頁腳？

的jsfiddle：https://jsfiddle.net/uqhh05en/

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

注意：沒有固定的行和列數允許的textarea。

注意：否允許固定高度。我想調整大小並隨着文本的增加而調整大小。

來源

2016-06-09 fatherazrael

將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>

來源

2016-06-09 06:40:24

這樣做沒有任何反應。它仍然隱藏 – fatherazrael

頁腳超過了內容，因爲它是position: fixed。當文本區域自動調整大小時，它也會增加父div的大小。您可以通過向下滾動查看「隱藏」textarea。

我建議添加一些代碼，每次觸發受影響的textareas的大小時，將屏幕向下滾動一行的高度。

來源

2016-06-09 06:54:46 Darvanen

這是一個很好的建議，我已經實施了大部分。一個問題仍然存在。假設我輸入了50-60行的文本，然後我將光標移動到textarea的第二行，然後再次向上和向下滾動。 – fatherazrael

我不確定我是否遵循了您的問題......但是我會在代碼中加入一個檢查來查看屏幕是否已經完全滾動，只有滾動時纔會滾動更多。 – Darvanen

https://jsfiddle.net/uqhh05en/4/ – fatherazrael

如何防止autosize textarea進入帶有固定/ Z-Index頁腳的頁腳？

回答

相關問題