2010-01-19 6 views
9

Chrome은 기본적으로 텍스트 영역의 크기를 조정할 수있게합니다. 텍스트 영역의 크기 조정 이벤트에 이벤트를 첨부하려면 어떻게해야합니까? 순진한 짓을하면 $('textarea').resize(function(){...})은 아무런 효과가 없습니다.jQuery : Chrome 텍스트 영역 및 크기 조정 이벤트

+1

jQuery(document).ready(function(){ // set init (default) state var $test = jQuery('#test'); $test.data('w', $test.outerWidth()); $test.data('h', $test.outerHeight()); $test.mouseup(function(){ var $this = jQuery(this); if ( $this.outerWidth() != $this.data('w') || $this.outerHeight() != $this.data('h') ) alert($this.outerWidth() + ' - ' + $this.data('w') + '\n' + $this.outerHeight() + ' - ' + $this.data('h')); // set new height/width $this.data('w', $this.outerWidth()); $this.data('h', $this.outerHeight()); }); }); 

HTML 및 클릭 후. – Sampson

답변

8

텍스트 영역 크기 조정에 이벤트를 특별히 첨부 할 수있는 것처럼 보이지 않습니다. 크기 조정 이벤트는 창 크기를 조정하면 시작됩니다.

7

지금이 권리를 테스트 할 수 없습니다 만, this forum entry에 따라 사용하여 해제 할 수 있습니다 :

style="resize: none;" 
해당 항목에 명시된 달리

, max-widthmax-height 그것을 잘라하지 않습니다 - 감사 @ 조나단 샘슨에 정보.

+2

+1'resize : none'은 그것을 비활성화합니다. 'max-width'와'max-height'는 그렇지 않았습니다 : http://jsbin.com/inane – Sampson

+0

환호성 조나단. 그에 따라 내 대답을 업데이 트되었습니다. –

5

다음은 CoffeeScript를 사용하여 작성된 jQuery 플러그인입니다. 조나단 샘슨의 아이디어.

$.fn.sizeId = ->               
    return this.height() + "" + this.width()        

$.fn.textAreaResized = (callback) ->          
    this.each ->               
     that = $ this              
     last = that.sizeId() 
     that.mousedown ->             
      last = that.sizeId()           
     that.mousemove ->             
      callback(that.get(0)) if last isnt that.sizeId()    

당신은 커피 스크립트의 홈페이지

http://jashkenas.github.com/coffee-script/

사용 "커피 스크립트 시도"버튼을 자바 스크립트로 구축 할 수 있습니다.

0

내가 mousedown에 크기 조정() 이벤트를 트리거하기 위해 깨끗한 솔루션을 시작 시도했다 : http://jsfiddle.net/cburgmer/jv5Yj/3/ 그러나 Chrome이 크기 조정 핸들러에서 mousedown을 트리거하지 않는 것처럼 Firefox에서만 작동합니다. 그러나 그것은 마우스 업을 유발합니다.

5

이것은 오래된 질문이지만, 다른 사람이 IRC에서 같은 일을했다, 그래서 나는 여기에서 그것을 해결하기로 결정 : 크롬 크기 조정 이벤트를 캡처하지 않습니다 http://jsfiddle.net/vol7ron/Z7HDn/

모든 사람의 권리와 크롬하지 않는 당신이 초기화 상태를 설정 한 다음 mouseup에 통해 변경 처리 할 필요가 있도록 mousedown을 캡처 : 당신은 전에 폭을 확인할 수 있습니다

<textarea id="test"></textarea> 
관련 문제