Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > изменение размера textarea

Автор: Vovan222 9.9.2010, 18:35

Есть textarea:

Код


<html>
    <head>
    </head>
    <body>
        <textarea style="width:300px; height:80px;"></textarea>
    </body>
</html>

Можно ли сделать так чтобы когда вводишь текст, то когда он не помещается в textarea по вертикали, то вертикальная полоса прокрутки не появлялась, а вместо этого textarea динамически меняла бы увеличивала свой размер по высоте?

Автор: bars80080 9.9.2010, 18:49

можно, ставим обработчик на текстарею, допустим по onkeyup. в обработчике рассчитываем высоту и ширину поля, замеряем длину введённого текста, и сравниваем через установленный коэффициент. конечно, коэффициент придётся подгонять, и для достоверности выставить моноширинный шрифт

Автор: Vovan222 9.9.2010, 20:35

bars80080, не могли бы вы привести примерчик на JS?

Автор: CruorVult 9.9.2010, 21:29

Код


<textarea onkeypress="resize(this, event)" cols="20" rows="2"></textarea>

Изменение и высоты и длины:

Код


function resize(el, e) {        
    var text = el.value;
    var rows = text.split(/\n/g);    
    if(e.keyCode == 13) {
        if( rows.length>=el.rows) el.rows++;  
    } else if(el.cols<=rows[rows.length-1].length){
        el.cols++;
    }
}

Автор: bars80080 9.9.2010, 22:25

CruorVult, а он отследит текст, если пользователь не будет нажимать на кнопку enter?

Цитата(Vovan222 @ 9.9.2010, 20:35

)

не могли бы вы привести примерчик на JS?

на чистом js писать не буду, долго. с jquery должно быть как-то так:

Код


<textarea onkeypress="reheigher(this)"></textarea>

Код


function reheigher(th) {    
    var kw = 10; // некий коэффициент равный ширине буквы
    var kh = 16; // коэффициент равный высоте буквы
    var h = $(th).height();
    var w = $(th).width();
    var l = $(th).innerHTML.length;
    var r = l*kw*kh/w;
    $(th).height(r);
}

Автор: CruorVult 9.9.2010, 23:33

Цитата(bars80080 @ 9.9.2010, 22:25

)

CruorVult, а он отследит текст, если пользователь не будет нажимать на кнопку enter?

bars80080, нет. В опере текстареа будет расширяться по-горизонтали если писать сплошной текст, а по вертикали только по ентеру. Для других браузеров не покатит, согласен, но можно подлатать код если надо. Хотя забью, раз твой код работает smile

Сомневаюсь что он будет корректно работать. Как я понял размер завист от длины строки, тоесть если я введу:

Цитата

ааааа

Цитата

а
а
а
а
а

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

Автор: Vovan222 10.9.2010, 10:38

есть вот такой вот примерчик, вроде высота textarea во всех браузерах изменяется правильно, однако в IE и Opera если в последней строке остается примерно 6-10 символов для ввода, то он все равно расширяется на одну строчку:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>изменение размера textarea</title>
<style type="text/css">
body {
background-color:#004B52;
}
textarea{
  background-color: #FF0000;
  color:yellow;
}
</style>
<script language="JavaScript" type="text/javascript">
function flexibleTextarea(b) {
    var a = document.getElementById(b) || b;
    if (a) {
        a.style.overflow = "hidden";
        var e = a.rows = a.rows > 0 ? a.rows : 2;
        b = a.cols = a.cols > 0 ? a.cols : 20;
        var g = RegExp("([^\r\n]{" + b + "})([^\r\n])"),
            f = RegExp("[^\n]{" + b + "}\n?$|[^\n]{0," + b + "}\n");
        a.onkeyup = a.onkeydown = function () {
            a.value = a.value.replace(g, "$1\r\n$2");
            for (var c = 0, d = a.value; d.search(f) >= 0;) {
                c++;
                d = d.replace(f, "")
            }
            c ++;
            if (c < e) c = e;
            a.rows = c
        }
    }
};
window.onload = function(){
flexibleTextarea('textarea');
flexibleTextarea('textarea1');
}
</script>
</head>
<body>
<textarea id='textarea'   rows="3"    cols="50" ></textarea>
<br />
<textarea id='textarea1' ></textarea>
</body>
</html>

в чем может быть проблема?