textarea onresize не работает

Question

По данным w3 школ <textarea> опоры onresize Однако это не работает.

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

браузеры пробовали:

Chrome 25.0.1364.172

Safari 6.0.3 (7536.28.10)

Firefox 19.0

Скрипка: http://jsfiddle.net/btevfik/5abR3/

Обновить

когда я усвоил урок не доверять w3schools 100%, я нашел это

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

Answer 1

Текстовые области не изменяют размер в большинстве (ВСЕХ), событие onresize браузеров НЕ РАБОТАЕТ для объекта окна в этом случае, вы используете плагин jQuery UI:

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

Ссылка: http://jqueryui.com/resizable/

Answer 2

Большинство браузеров запускают только один размер элемента body.

Лучшее решение, которое я нашел на данный момент, - это использование прослушивателей событий переполнения и переполнения в красивой форме.

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

Это чистый JavaScript.

Answer 3

Небольшое решение:

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

Answer 4

Просто обновление ответа Равулы (моя репутация слишком низкая для комментариев):

JQuery добавляет несколько элементов div к элементу с изменяемым размером. В моем случае это разрушило весь макет. Вы можете избавиться от дополнительных полей / отступов, используя:

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

Это, конечно, не очень чисто и мои проблемы с причиной, но это сработало в моем случае. Я обновлю этот пост, если у меня возникнут какие-либо проблемы.

Answer 5

Мне нравится придерживаться vanilla js по любой причине. Итак, вот простое решение ванили:

<textarea
  onmousedown="storeDimensions(this)"
  onmouseup="onresizeMaybe(this)"
></textarea>

<script>
  function storeDimensions(element){
    element.textWidth = element.offsetWidth;
    element.textHeight = element.offsetHeight;
    element.value = "is it gonna change? we don't know yet...";
  }
  
  function onresizeMaybe(element){
    if (element.textWidth===element.offsetWidth
     && element.textHeight===element.offsetHeight) 
      element.value = "no change.\n";
    else element.value ="RESIZED!\n";
    
    element.value +=
       `width: ${element.textWidth}\n`
      +`height: ${element.textHeight}`;
  }
</script>

а для домашнего задания используйте onmousemove для запуска события изменения размера вместо onmouseup (Мне это не нужно в моем конкретном случае).

:) надеюсь, что это когда-нибудь поможет кому-то... учитывая, что этому вопросу теперь 5 лет.