FireFox теперь поддерживает события MutationObserver на textareas, и это, кажется, работает довольно хорошо. К сожалению, Chrome все еще нуждается в обходном пути.
Основываясь на других ответах на этой странице, приведена обновленная и обновленная версия, которая запускает событие изменения размера окна при изменении размера textarea
.
Я также добавил прослушиватель событий для мыши, выходящей из окна, которое необходимо в iFrame для определения, когда textarea
становится больше, чем кадр.
(function(textAreaChanged){
function store(){
this.x = this.offsetWidth;
this.y = this.offsetHeight;
}
function textAreaEvent(){
if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
textAreaChanged();
store.call(this);
}
}
$('textarea').each(store).on('mouseup mouseout',textAreaEvent);
$(window).on('mouseup',textAreaEvent);
})(function(){
$(window).trigger('resize');
});
В IE9 и выше мы можем сделать то же самое без jQuery.
(function(textAreaChanged){
function store(){
this.x = this.offsetWidth;
this.y = this.offsetHeight;
}
function textAreaEvent(){
if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
textAreaChanged();
store.call(this);
}
}
Array.prototype.forEach.call(
document.querySelectorAll('textarea'),
function (el){
el.addEventListener('mouseup', textAreaEvent);
el.addEventListener('mouseout', textAreaEvent);
}
);
window.addEventListener('mouseup',textAreaEvent)
})(function(){
//trigger window resize
var event = document.createEvent('Events');
event.initEvent('resize', true, false);
window.dispatchEvent(event);
});