В текущих версиях Firefox и Chrome есть обработчик перетаскивания, чтобы изменить размер <textarea>. Мне нужно захватить событие изменения размера, я думал, что будет легко с событием jQuery resize(), но это не сработает!
Я также пробовал нормальное событие onResize, но результат тот же. Вы можете попробовать его на JSFiddle.
Есть ли способ захватить его?
Прежде чем выдать событие изменения размера, вы должны сначала изменить размер текстового поля. Вы можете сделать это с помощью jQuery UI resizable() и внутри него вы можете вызвать событие изменения размера.
$("textarea").resizable({
resize: function() {
$("body").append("<pre>resized!</pre>");
}
});
Это старый вопрос, но у кого-то был тот же самый в IRC, поэтому я решил решить его здесь: http://jsfiddle.net/vol7ron/Z7HDn/
Chrome не фиксирует событие изменения размера и что Chrome не отображает мульдауны, поэтому вам нужно установить состояние init, а затем обрабатывать изменения с помощью мыши:
jQuery(document).ready(function(){
var $textareas = jQuery('textarea');
// store init (default) state
$textareas.data('x', $textareas.outerWidth());
$textareas.data('y', $textareas.outerHeight());
$textareas.mouseup(function(){
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('x')
|| $this.outerHeight() != $this.data('y') )
{
// Resize Action Here
alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n'
+ $this.outerHeight() + ' - ' + $this.data('y')
);
}
// store new height/width
$this.data('x', $this.outerWidth());
$this.data('y', $this.outerHeight());
});
});
HTML
<textarea></textarea>
<textarea></textarea>
Примечание:
Как упоминает Брайан Даунинг, это работает, когда вы нажимаете мышь, когда ваша мышь находится поверх текстового поля; однако бывают случаи, когда это может не произойти, например, когда браузер не максимизируется, и вы продолжаете выходить за пределы браузера, или используйте resize:vertical для блокировки движения.
Для чего-то более продвинутого вам нужно добавить других слушателей, возможно, очередей и интервальных сканеров; или использовать mousemove, так как я считаю, что jQuery resizable делает - тогда возникает вопрос, насколько вы цените производительность против полировки?
Обновление:. С тех пор было изменение пользовательского интерфейса браузеров. Теперь двойной щелчок по углу может сжать текстовое поле до его размера по умолчанию. Поэтому вам также может потребоваться захват изменений до/после этого события.
Другой способ сделать это - привязка к событию mouseup на текстовом поле. то вы можете проверить, изменился ли размер.
Я смешал vol7ron немного, и просто заменил "Resize Action Here" простым триггером обычного события "resize", чтобы вы могли прикрепить все, что хотите, к событию изменения размера "как обычно":
$(document).ready(function(){
$('textarea').bind('mouseup mousemove',function(){
if(this.oldwidth === null){this.oldwidth = this.style.width;}
if(this.oldheight === null){this.oldheight = this.style.height;}
if(this.style.width != this.oldwidth || this.style.height != this.oldheight){
$(this).resize();
this.oldwidth = this.style.width;
this.oldheight = this.style.height;
}
});
});
Я добавил событие mousemove, так что изменение размера также срабатывает при перетаскивании мыши при изменении размера, но имейте в виду, что он очень часто срабатывает при перемещении мыши.
в этом случае вам может потребоваться небольшая задержка при фактическом запуске или обработке события изменения размера, например. замените выше:
$(this).resize();
с:
if(this.resize_timeout){clearTimeout(this.resize_timeout);}
this.resize_timeout = setTimeout(function(){$(this).resize();},100);
пример использования, сделайте 2-е текстовое поле расти и сжиматься первым:
$('textarea').eq(0).resize(function(){
var $ta2 = $('textarea').eq(1);
$('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));
});
Новый стандарт для этого - Resize Observer api, доступный в Chrome Dev 54 за флажком функций экспериментальной веб-платформы.
function outputsize() {
width.value = textbox.offsetWidth
height.value = textbox.offsetHeight
}
outputsize()
new ResizeObserver(outputsize).observe(textbox)Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>Событие изменения размера не существует для текстового поля.
Изменчивый jQueryPlugin не выглядит родным, поэтому мы должны использовать альтернативу.
Один из способов эмулировать это - использовать событие mousedown/click. Если вы хотите запустить событие в реальном времени, вы можете сделать это следующим образом:
Обновлено 11 ноября 2013 года:
// This fiddle shows how to simulate a resize event on a
// textarea
// Tested with Firefox 16-25 Linux / Windows
// Chrome 24-30 Linux / Windows
var textareaResize = function(source, dest) {
var resizeInt = null;
// the handler function
var resizeEvent = function() {
dest.outerWidth( source.outerWidth() );
dest.outerHeight(source.outerHeight());
};
// This provides a "real-time" (actually 15 fps)
// event, while resizing.
// Unfortunately, mousedown is not fired on Chrome when
// clicking on the resize area, so the real-time effect
// does not work under Chrome.
source.on("mousedown", function(e) {
resizeInt = setInterval(resizeEvent, 1000/15);
});
// The mouseup event stops the interval,
// then call the resize event one last time.
// We listen for the whole window because in some cases,
// the mouse pointer may be on the outside of the textarea.
$(window).on("mouseup", function(e) {
if (resizeInt !== null) {
clearInterval(resizeInt);
}
resizeEvent();
});
};
textareaResize($("#input"), $("#output"));
FireFox теперь поддерживает события MutationObserver в текстовых областях, и это, похоже, работает очень хорошо. 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);
});
благодаря MoonLite - ваш script работает нормально, но иногда, если вы делаете быстрое увеличение размера, указатель мыши находится за пределами области textarea на кнопке мыши, и желаемая функция не запускается. Поэтому я добавил событие mouseup для содержащего элемента, чтобы сделать его работоспособным.
.
$('textarea_container').bind('mouseup', function()
{ YourCode ; } ) ;