Блог

Главная - Вопросы по программированию - Как изменить размер текстового поля и получить размеры внутри элемента div с помощью jquery

Как изменить размер текстового поля и получить размеры внутри элемента div с помощью jquery

#jquery #asp.net #html #resize #dimensions

#jquery #asp.net #HTML #изменить размер #размеры

Вопрос:

У меня есть элемент div, который можно перетаскивать, и у меня есть текстовое поле внутри этого элемента div, и когда я автоматически перетаскиваю элемент div, размер текстового поля должен увеличиваться вместе с div.И мне нужно получить позиции текстового поля X и Y, так как мне это сделать?

Это то, что у меня есть сейчас:

http://jsfiddle.net/wWFpP/3/

Вот мой ode:

    <div class="demo">
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
        </div>

Это мой скрипт для перетаскивания:

 <script>
        $(function () {
            $('.demo')
        .draggable()
        .resizable();
        });

    </script>

Комментарии:

1. JSFiddle — отличный инструмент, но обычно рекомендуется вставить соответствующий код в свой вопрос, чтобы, если ваша внешняя ссылка станет недоступной позже, будущие посетители все равно могли получить некоторое представление как о проблеме, так и о решении.

2. Возможно, вы сможете решить эту проблему, посмотрев на пользовательский интерфейс jQuery.

3. @ Kiley Naro Да, я так и думал, но это будет ясно для того, кто лучше понимает, чем то, что я упоминаю здесь. В любом случае я обновил свой код.

4. @user944919 Редактирование, которое вы только что сделали, отличное. Таким образом, SO не нужно полагаться на JSFiddle для завершения! В любом случае, 1, потому что это то, что мне тоже интересно.

5. Большое вам спасибо:) и я слишком горю желанием разработать что-то очень интересное и многому научиться у вас.

Ответ №1:

A textarea должно быть указано в терминах строк и столбцов, в соответствии со спецификациями, но вы все равно можете стилизовать их с помощью CSS:

 #TextBox1
{
    width: 100%; height: 100%; /* make the element resize */
}
.demo
{
    width: 150px;
    height: 150px;
    padding: 5px 10px 20px 4px; /* updated padding to make things look better */
    background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

Смотрите здесь. Протестировано в Firefox, Chrome.

Кроме того, если вам нужно получить координаты X и Y, у draggable есть stop метод, к которому вы можете привязаться:

 $('.demo')
    .draggable({ stop: function(event, ui) {
        //get the textarea element and it's coordinates
        var txt = $(this).find('textarea:first');
        var x = txt.offset().left;
        var y = txt.offset().top;
        alert('('   x   ', '   y  ')');
    } })
    .resizable();

Комментарии:

1. Обновил мой ответ, чтобы также отрегулировать высоту.

Ответ №2:

Это то, что вы хотите?

http://jsfiddle.net/gmrcn/

Редактировать:
http://jsfiddle.net/gmrcn/2/

 #TextBox1 {
    width: 100%;
    height: 100%; /* edit: fixed @ comment */
}

Комментарии:

1. Да, то же самое, что было сделано выше с помощью «wsanville», и мне тоже нужно увеличить его высоту. В любом случае спасибо за ответ.

2. Еще раз спасибо и как я получаю размеры (т.Е. Позиции X и Y) для текстового поля?

3. Я точно не знаю. Попробуйте $('.demo').style.pixelHeight; и $('.demo').style.pixelWidth;

Метки: