textarea automatisch größer machen
Tag,
kann man das irgendwie machen, dass sich die Textarea box sich automatisch bis 100px vergrößert sollte man ein Text schreiben, dass man auch den ganzen Text halt sieht. Sonst kennt man das ja z.b das overflow-y (scroll) angewendet wird und den obigen Text nicht mehr sehen kann wie im zweiten Teil meines Videos.
Der hier verwendete Code
<style>
#send_comment{
display:block;
border:none;
border-bottom:1px solid #e5e5e5;
text-align:left;
resize:none;
height:25px;
max-height:100px;
margin:0;
padding:2px 0px 0px 2px;
overflow:hidden;
background-color: #D0D0D0;
max-height:100px;
}
</style>
<body onload="init();">
<textarea id="send_comment" onPaste="" autocomplete="off" autocorrect="off" onkeypress="return enter(event);" placeholder="Kommentieren... (Mit Enter absenden)"></textarea>
</body>
<script>
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('send_comment');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>