Как расширить текстовую область для фокусировки поверх других элементов с помощью jQuery animate

Question

Как расширить текстовую область для фокусировки поверх других элементов с помощью jQuery animate

0

На это ответили много раз и много способов для div и изображений, но я не могу найти пример того, как это сделать для textarea.

Я хочу, чтобы textarea расширялось и не перемещало другие элементы под ним, а расширялось поверх них. У меня есть рабочий пример ниже, просто расширяя его, но я хочу, если я смогу его получить, чтобы оживить расширение, а не просто его больше и меньше.

Я не хочу использовать position: absolute и не хочу использовать какой-либо другой элемент html, отличный от textarea. Мне нужно все это для работы в таблице, как показано ниже в моем html.

Это мой html:

<table>
<tr>
    <td><textarea class="expand" rows="1" cols="10"></textarea></td>
</tr>
<tr>
    <td>Here is some text just below. I want it to not move.</td>
<tr>
<tr>

Мой javascript:

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).addClass('focused');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
    });
});

И мой CSS:

.focused {
    position: relative;
    height: 10em !important;
    z-index: 1000;
}

textarea {
    width: 350px;
    height: 1em;
    line-height: 1em;
    resize: none;
}

leemid 14 фев. 2014, в 18:59

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

digitalextremist · Answer 1 · 2014-02-14T14-58-00.000Z

Выберите один: `table` с `position: absolute;` или `div` с `float: left`...

Из того, что я вижу, с решением использовать таблицу, нужно использовать positon: absolute; потому что вам нужно использовать z-index: и перетекание других элементов. Использование float: left и table будет очищать поплавки. В противном случае вы можете использовать float: left довольно легко.

См. Рабочий сценарий: http://jsfiddle.net/digitalextremist/JdA6L/

$(window).load(function () {
    $('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 500);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "1em"
        }, 500);
        $(this).removeClass("expanding")
    });
});

Добавлен один класс CSS:

.expanding {
    position: absolute;
    z-index: 9;
}

Спасибо. Я помню, как делал все вокруг, но не совсем понял. Идеальное решение.
Очень рад, что вы нашли это приемлемым для вашего случая!
Теперь вот в чем дело, хотя он прекрасно работает как обычный старый html-файл, тот же код, перенесенный в приложение MVC 4, не распространяется на верхнюю часть пунктов ниже, что, конечно, я и хотел использовать в этом примере все время. Я просто не думал, что должен туда. Чтобы усложнить все это, я также добавляю редактор TinyMCE для текстовой области. Есть опыт в этой области?
Это отдельный вопрос целиком. Да, я знаю факторы, привнесенные TinyMCE, но, пожалуйста, начните новый вопрос, примите этот ответ, ссылку на этот вопрос и разместите ссылку здесь также. Совсем другая ситуация, но теперь она будет решена, когда вся ситуация будет объяснена так, как вы.

Как расширить текстовую область для фокусировки поверх других элементов с помощью jQuery animate

1 ответ

Выберите один: table с position: absolute; или div с float: left...

Ещё вопросы

Выберите один: `table` с `position: absolute;` или `div` с `float: left`...