textarea onresize not working

问题

according to w3 schools <textarea> supports onresize however it is not working.

http://www.w3schools.com/jsref/event_onresize.asp

browsers tried:

Chrome 25.0.1364.172

Safari 6.0.3 (7536.28.10)

Firefox 19.0

FIDDLE: http://jsfiddle.net/btevfik/5abR3/

update

as i learned my lesson not to trust w3schools 100%, i found this

https://developer.mozilla.org/en-US/docs/DOM/element.onresize

回答1:

Textareas don't resize in MOST(ALL) the browsers onresize event is NOT WORKING FOR the window object in this case, you case use jQuery UI plugin:

$("idoftextarea").resizable({
    resize: function() {
        $("id").append("yourcode");
    }
});

Reference: http://jqueryui.com/resizable/

回答2:

Most browsers only trigger an onresize on the body element.

The best solution I've found so far is the use of the overflow and underflow event listeners in a beautiful hack.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

It's pure JavaScript.

回答3:

A little workaround :

$('textarea').bind('mouseup', function() {
    console.log('resized');
});

回答4:

Just an update to ravula's answer (my reputation is too low for comments):

JQuery adds a bunch of divs to the resizable element. In my case this destroyed the whole layout. You can get rid of the additional margins / padding by using:

.ui-wrapper {
	padding:0px !important;
	margin:0px !important;
	
}

This is certainly not very clean and my cause problems but it worked in my case. I'll update this post if i experience any issues.

来源：https://stackoverflow.com/questions/15495936/textarea-onresize-not-working

标签

html

textarea

onresize