Как изменить высоту текстовой области одним щелчком мыши

Question

Я пытаюсь сделать что-то вроде этого.

• Я хочу увеличить высоту текстовой области, когда пользователь нажимает кнопку

Для этого я сделалКнопка, как это <a id="expandText" href="#"> Expand </a> и добавил следующий javascript

$('#expandText').click(function () {
    $('#id_text').animate({ height: "1000px" }, 500);
    //$('#id_text').css( "height","+=85" );
});

Я попробовал две вещи

1. Одна была анимировать высоту текстового поля
2. другой должен был изменить CSS, но ни один из них не сработал

Редактировать: Я испробовал все то, что было дано ниже, но оно все еще не работает.Возможно ли это потому, что у этого текстового поля есть класс = MCeEditor, который делает этот текстовым редактором, а не просто обычной текстовой областью

Answer 1

Вы говорите, что у текстовой области есть класс MCeEditor - так что я предполагаю, что это TinyMCE или что-то в этом роде.

Если это так, используйте inspect element в любом браузере, который вы используете (удерживайте нажатой клавишу CTRL, чтобы открыть контекстное меню браузера, если появляется контекстное меню TinyMCE), и перемещайтесь вниз по редактору, пока не найдете iframe, где написание действительно происходит. Если я не ошибаюсь, селектор .mceEditor iframe должен сделать.

Причиной всего этого является то, что TinyMCE скрывает вашу фактическую текстовую область и самостоятельно создает редактор. Когда вы печатаете в TinyMCE, он помещает этот текст обратно в текстовую область, чтобы вы могли получить его, как и ожидалось, со стороны сервера. Поэтому, когда вы видите редактор MCE, вы не управляете своей текстовой областью напрямую, как можно было бы ожидать.

Answer 2

Это странно, так как ваш код должен работать.Есть ли у вас ошибки?Работает ли это, когда вы запускаете напрямую $('#id_text').animate({ height: "1000px" }, 500); на консоли JS?Еще одна вещь, вы можете добавить «вернуть ложь», как это

$('#expandText').click(function () {
    $('#id_text').animate({ height: "1000px" }, 500);
    return false;
});

, чтобы избежать действия ссылки при нажатии на ссылку.

РЕДАКТИРОВАТЬ: Вы добавили ", у этой текстовой области есть класс = MCeEditor ", поэтому я думаю, что вы что-то неправильно поняли.То, что вы видите, - это редактируемый контент (span или div), а не текстовая область (которая на самом деле скрыта).Вам нужно изменить размер этого элемента (и, вероятно, вам следует использовать API TinyMCE для этого).

Answer 3

Работает нормально.Смотрите здесь в JSFiddle http://jsfiddle.net/URkWu/

Дайте мне знать, если вы не видите анимацию текстового поля.

Answer 4

Я прочитал документ, и вы можете просто использовать:

$('#id_text').animate({ height: 1000 }, 500);