Firefox의 element.style을 재정의하는 방법과 자동 크기 조정을 허용 하시겠습니까?

Question

내 사이트에 몇 개의 텍스트 영역이 있습니다. 하나는 초기 높이가 50px (약 2-3 행 높이)이고 다른 하나는 초기 높이가 25px (단일 행) 여야합니다. 둘 다 JQuery AutoSize를 사용하여 더 많은 텍스트가 추가 될 때 텍스트 영역의 높이를 늘립니다. !

textarea-large { 
    height: 50px !important; 
} 
textarea-small { 
    height: 25px !important; 
} 

는 그 다음이 큰 파이어 폭스의 스타일을 무시하지만, 자동 크기 조정 작동이 중지 :이 같은 CSS 중요한 규칙을 사용하는 경우

. 더 많은 텍스트를 추가 할 때 텍스트 상자는 동일한 크기로 유지되고 입력 한 내용을 읽을 수 없습니다.

Firefox의 element.style을 무시하는 초기 높이를 설정하는 방법은 무엇입니까? 텍스트가 추가되면 자동 크기 조정이 작동하여 텍스트 영역을 높이게 할 수 있습니까?

Answer 1

height을 min-height으로 변경하면 트릭을 수행하게됩니다. 여기

<textarea class="large"></textarea> 
<textarea class="small"></textarea> 

textarea { margin: 1em; outline: none; text-align: justify; overflow: hidden; } 
.large { min-height: 50px !important; } 
.small { min-height: 25px !important; } 

내가 그것을 자동으로 크기를 확인하는 데 사용되는 스크립트입니다 : 여기

See this fiddle.

는 바이올린을위한 HTML과 CSS입니다

$(function() { 
    // the following simple make the textbox "Auto-Expand" as it is typed in 
    $("textarea").keyup(function(e) { 
     // the following will help the text expand as typing takes place 
     while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) { 
      $(this).height($(this).height()+1); 
     }; 
    }); 
});