如何防止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页脚的页脚？

回答

相关问题