Автоматическое изменение размера в текстовое поле начальной загрузки

Question

я нашел следующий очень простой способ, чтобы автоматически настроить текстовое поле, чтобы с высоты текста в этом jsfiddle http://jsfiddle.net/tovic/gLhCk/:

function expandTextarea(id) { 
 
    document.getElementById(id).addEventListener('keyup', function() { 
 
     this.style.overflow = 'hidden'; 
 
     this.style.height = 0; 
 
     this.style.height = this.scrollHeight + 'px'; 
 
    }, false); 
 
} 
 

 
expandTextarea('txtarea');

body { 
 
    padding:50px; 
 
} 
 

 
textarea { 
 
    margin:0px 0px; 
 
    padding:5px; 
 
    height:16px; 
 
    line-height:16px; 
 
    width:96%; 
 
    display:block; 
 
    margin:0px auto;  
 
}

<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Однако, я использую самозагрузки в моем проекте, и это создает проблемы.

1. Текстовое поле - всего 4 пикселя вместо 16. Похоже, что бутстрап изменяет способ использования полей, paddings и высот.
2. При попадании внутрь текст подпрыгивает вверх и вниз, что раздражает глаз.

Я попытался удалить все классы начальной загрузки в инспекторе HTML моего браузера, но проблема все еще была там. Кто-нибудь есть идея, как решить это?

Вот код при добавлении CSS Bootstrap в:

function expandTextarea(id) { 
 
    document.getElementById(id).addEventListener('keyup', function() { 
 
     this.style.overflow = 'hidden'; 
 
     this.style.height = 0; 
 
     this.style.height = this.scrollHeight + 'px'; 
 
    }, false); 
 
} 
 

 
expandTextarea('txtarea');

body { 
 
    padding:50px; 
 
} 
 

 
textarea { 
 
    margin:0px 0px; 
 
    padding:5px; 
 
    height:16px; 
 
    line-height:16px; 
 
    width:96%; 
 
    display:block; 
 
    margin:0px auto;  
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 

 
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Answer 1

Спасибо за все ваши ответы, он дал мне ценные сведения, что я должен был изменить. В конце концов, немного больше padding-bottom в css сделал трюк.

function expandTextarea(id) { 
 
    document.getElementById(id).addEventListener('keyup', function() { 
 
     this.style.overflow = 'hidden'; 
 
     this.style.height = 0; 
 
     this.style.height = this.scrollHeight + 'px'; 
 
    }, false); 
 
} 
 

 
expandTextarea('txtarea');

body { 
 
    padding:50px; 
 
} 
 

 
textarea { 
 
    /* margin:0px 0px; this is redundant anyways since its specified below*/ 
 
    padding-top:10px; 
 
    padding-bottom:25px; /* increased! */ 
 
    /* height:16px; */ 
 
    /* line-height:16px; */ 
 
    width:100%; /* changed from 96 to 100% */ 
 
    display:block; 
 
    /* margin:0px auto; not needed since i have width 100% now */ 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 

 
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>

Answer 2

Вы можете использовать важно, чтобы перезаписать загрузочный свойство!.

textarea { 
    margin:0px 0px; 
    padding:5px; 
    height:16px !important; 
    line-height:16px; 
    width:96%; 
    display:block; 
    margin:0px auto;  
} 

Answer 3

заменить height с min-height

textarea { 
    margin:0px 0px; 
    padding:5px; 
    min-height:16px; 
    line-height:16px; 
    width:96%; 
    display:block; 
    margin:0px auto;  
}