마우스 클릭시 Textarea 높이를 변경하는 방법

Question

이런 식으로하려고합니다.

• 나는 사용자가 I이 <a id="expandText" href="#"> Expand </a> 같은 버튼을 만들어 내가 노력

  $('#expandText').click(function() { 
      $('#id_text').animate({ height: "1000px" }, 500); 
      //$('#id_text').css("height","+=85"); 
  }); 
  

  다음 자바 스크립트를 추가 한이 들어 버튼

을 클릭하면 텍스트 영역의 높이를 높이려는 두 가지

1. 하나는 텍스트 상자의 높이를 움직이게하는 것이었다.
2. 다른
는 CSS를 변경했지만, 그들 중 어느 쪽

을 일했다 편집 : 내가 아래에 주어진 모든 일을 시도,하지만 여전히 작동하지 않습니다. 이 텍스트 영역이 텍스트 영역 편집기뿐 아니라 일반 텍스트 영역을 만드는 클래스 = MCeEditor을 가지고 있기 때문에 할 수 없습니다

Answer 1

당신은 텍스트 영역이 클래스 MCeEditor을 가지고 있다고 말합니다. 그래서 TinyMCE 나 그런 종류의 것 같습니다.

그렇다면 사용중인 브라우저에서 inspect 요소를 사용하고 (TinyMCE 컨텍스트 메뉴가 표시되면 Ctrl 키를 누른 상태에서 브라우저 컨텍스트 메뉴를 표시) 편집기를 통해 iframe을 찾을 때까지 탐색하십시오 글이 실제로 일어난다. 내가 잘못 본 것이 아니라면 선택자 .mceEditor iframe이해야합니다.

이 모든 이유는 TinyMCE가 실제 텍스트 영역을 숨기고 자체 편집기를 만드는 것입니다. TinyMCE에 타이핑 할 때 텍스트를 텍스트 영역에 다시 넣으면 서버 측에서 예상대로 텍스트를 검색 할 수 있습니다. 따라서 MCE 편집기를 볼 때 예상대로 텍스트 영역을 직접 조작하지는 않습니다.

Answer 2

나는 문서를 읽은 당신은 사용할 수 있습니다 :

$('#id_text').animate({ height: 1000 }, 500); 

Answer 3

이 이상해 코드가 작동해야합니다. 어떤 오류가 있습니까? JS 콘솔에서 직접 $('#id_text').animate({ height: "1000px" }, 500);을 실행할 때 작동합니까? 한 가지 더 말하면 링크를 클릭 할 때 링크 동작을 피하기 위해

$('#expandText').click(function() { 
    $('#id_text').animate({ height: "1000px" }, 500); 
    return false; 
}); 

을 추가 할 수 있습니다.

편집이 : 추가 한 "이 텍스트 영역은 클래스 = MCeEditor이있다", 그래서 당신이 뭔가를 오해 생각합니다. 편집 가능한 내용 (span 또는 div)이 아니라 텍스트 영역 (실제로 숨겨 짐)이 아닙니다. 이 요소의 크기를 조정해야합니다. 그렇게하려면 TinyMCE API를 사용해야합니다.

Answer 4

괜찮습니다. JSFiddle에서 여기를 참조하십시오. http://jsfiddle.net/URkWu/

텍스트 상자가 애니메이션으로 표시되지 않으면 알려주십시오.