Javascript 또는 Jquery를 사용하여 div 크기를 조정하는 방법을 확인하는 방법

Question

와이어 프레이밍 중에 웹 애플리케이션이 있지만이 모델을 강화하기 전에 기술적 인 솔루션이 필요한 문제가 발생했습니다. 그 것 :. (. 최대 너비와 DIV)

• 도가 1 사용자는 새로운 "텍스트 필드 ' 요소를 생성 다음 사용자가 타이핑을 시작했다 소자 ...

  시까

• .도 2 요소는 텍스트 ( 다른 DIV의 형태로) 새로운 라인 및 '새로운'배경 이미지로 떨어진다 그것이 최대 폭의 도달이 (그것 생성 불투명도 및 위치의 효과가 생기도록) 큰 요소를 수용 할 수 있습니다. ze.

이것은 의도 된 기능의 대략적인 개요입니다 (이 순간에 주어진, 난 아직 최대 폭과 사업부처럼 동작 텍스트 필드가하는 방법을 잘 모르겠어요) 하지만 두 번째 단계에 대한 이벤트 처리기를 만드는 방법에 대해 궁금합니다.; 나는 모든 'keydown'이벤트를 확인하는 것에 대해 생각했지만 비효율적 인 것처럼 보입니다 ...

누구에게도 이와 같은 문제를 해결하기위한 조언이나 아이디어가 있습니까? 감사!

Answer 1

MSIE에서는 onresize가 실행됩니다.

Answer 2

'keydown'또는 'keyup'이벤트가 가장 먼저 떠오르는 이벤트입니다. 이 방법을 사용하기로 결정한 경우 때마다 html 요소 크기를 확인하고 이전 (변수에 저장) 크기와 비교해야합니다.

가장 쉬운 방법은 핸들러를 html 요소에 바인딩하여 크기가 변경되면 실행되도록하는 것 같습니다. 나는 그런 사건이 있는지 알지 못한다. 그러나 그때가는 길이다.

(당신의 아주 기술적 인 질문에 대한 +1)

Answer 3

당신은 CSS3 전환 기능을 사용하여 시도 할 수 :
http://slides.html5rocks.com/#slide42
당신이 원하는 요소가 브라우저 자체에서 애니메이션 할 수있는 방법입니다.

면책 조항 : 분명히 더 복잡한 효과에는 작동하지 않습니다.

Answer 4

최대 너비가 랩핑 될 때까지 입력 필드의 크기가 자동으로 조정되는 너비 문제를 어떻게 공격할지 확실하지 않습니다. 텍스트 필드 내부에 모노 스페이스 글꼴을 사용하여 자바 스크립트를 사용하여 최대 너비를 수평으로 늘려 상자의 성장을 모니터링하고 제어 할 수 있습니다.

높이를 자동으로 높이려면 텍스트 상자를 사용하여 한 줄로 설정하고 입력 상자처럼 보이게 한 다음 텍스트가 자동으로 다음 행으로 바뀌면 더 잘됩니다. 텍스트 영역의 scollHeight를 확인하고 텍스트 영역의 실제 높이를 확인한 다음 빼내면 텍스트 영역을 늘려 수직 스크롤 막대가 나타나지 않게하는 데 필요한 높이를 얻을 수 있습니다.

위의 내용은 자바 스크립트가 마술을하는 동안 잠깐 동안 스크롤 막대를 쓸어 넘기 게합니다. 스크롤 막대를 숨기려면 overflow:auto;을 사용할 수 있지만 scrollHeight가 여전히 올바르게 읽는지 여부는 알 수 없습니다. 실험을해야합니다.

또한 keydown에 간격을 설정하고 반복되는 키 아래쪽 텍스트 문제를 막기 위해 입력 길이를 확인하는 것에 대한 위의 내 의견에 유의하십시오.