jQuery - 크기 조정시 플래시가 발생하지 않는 자동 크기 조정 TextArea 만들기

Question

입력하는 동안 크기가 조정되는 자동 크기 조정 텍스트 영역 (FB에서와 같이)을 만들기 위해 노력했습니다. 거기에 몇 가지 플러그인이 있습니다. 문제는 모두 99 %만이 다. 무엇 실종 것은 :

• 는 크기 조정에 텍스트 영역이 깜박 붙여 넣기에
• 이 지연

이 (귀국일에이/입력) 여기 봐 주시기 바랍니다 : http://jsfiddle.net/uzjdC/3/

어떤 아이디어 왜 그것은 크기를 변경하면 깜박입니까? 그것을보고 입력 텍스트를 입력 한 다음 ..

감사

Answer 1

야후!를 누르십시오 솔루션을 찾았습니다! 당신의 모범은 나를 매우 흥미롭게했습니다. that's why I decided to play around in jsFiddle to try to fix your flashing issue. 깜박 이는 TextArea에 '많이 텍스트'가 있고 스크롤이 발생하기 때문입니다. keyup 이벤트는이 스크롤바를 이기지 못하지만, ... scroll 이벤트는!

HTML :

<textarea id="tst" rows="1" cols="40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum porttitor neque eget consequat. Sed faucibus purus vitae felis facilisis bibendum.</textarea> 

CSS는 :

textarea{  
    overflow:hidden; 
    overflow-x:hidden; 
    overflow-y:hidden; 
    padding:10px; 
} 

나는 텍스트 영역의 rows 속성을 사용하고 업 사이징 작업을 수행합니다. 나는 함수로 작성했습니다 는 난까지 크기 조정이 기능으로 영역을 : 더 깜박이는 발생하지 :

//inital resize - on document load 
resizeTextArea($('#tst')); 

//bind events 
$('#tst').bind('scroll keyup', function(){ 
    resizeTextArea($(this)); 
}); 

참고 :

//resize text area 
function resizeTextArea(elem){ 

    elem.height(1); 
    elem.scrollTop(0); 
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height()); 
} 

이제 우리는 크기 조정을 바인드해야 ! 왜? scoll 이벤트를 사용하고 있기 때문에! 여기에서 해결책을 시도해 볼 수 있습니다. http://jsfiddle.net/KeesCBakker/2D8Kf/

행운을 빈다!

: 동적으로 추가 된 텍스트 영역이있는 스키마를 지원하도록 jsFiddle 예제의 코드가 변경되었습니다. Check also this SO question.