Как расширить область текста при нажатии

Ответ 1

Что-то вроде этого будет работать...

Демо: http://jsfiddle.net/Y3rMM/

CSS...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML...

<textarea class="expand" rows="1" cols="10"></textarea>

JQuery...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

Ответ 2

Это можно сделать без использования JavaScript/jQuery, используя CSS transitions.

textarea {
    height: 1em;
    width: 50%;
    padding: 3px;
    transition: all 0.5s ease;
}

textarea:focus {
    height: 4em;
}

<textarea rows="1" cols="10"></textarea>

Ответ 3

Это будет работать для вас:

<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>

Я использовал onfocus вместо onclick, потому что onclick не запускается, если пользователь использует клавишу табуляции для перехода в текстовое поле. Вы также захотите убедиться, что пользователь не может изменить его размер самостоятельно, поэтому атрибут стиля.

Вы также можете добавить onblur="this.rows=1;", чтобы сжать его обратно, как только пользователь выйдет из вашего текстового поля.

Ответ 4

$("textarea").focus(function(){
    $("textarea").animate({ height: "70px" }, 500);
});

default css

textarea{ height: 50px;}

на фокусе textarea height будет увеличиваться:) простой jquery

Ответ 5

используйте этот плагин > http://plugins.jquery.com/project/elastic

очень простой и эффективный!

Ответ 6

Основанный на doog abide comment с помощью jQuery, я увеличил код, чтобы автоматически загрузить количество строк по длине содержимого и вернуться к 1, когда фокус потерян.

HTML:

<textarea class="expand" rows="1" cols="10"></textarea>

JQuery

$('textarea.expand').focus(function () {
    $(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
    $(this).animate({rows: 1}, 500);
    //Resize back to one row if the textarea is manually resized via the handle
    $(this).css({height: ''});
    $(this).css({width: ''});
});

Ответ 7

<textarea style="width:200px; height:50px;" id="ta"></textarea>

var ta = document.getElementById('ta');
ta.onclick = function(){
    this.style.height = "400px";
}  

Быстрая скрипка: http://jsfiddle.net/n6sgT/

Ответ 8

Вы можете сделать что-то вроде ниже:

<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >