Как мне сделать расширяющееся текстовое поле? - PullRequest
Новая
       9

Как мне сделать расширяющееся текстовое поле?

6 голосов
/ 28 мая 2010

Я хочу сделать учебник, где он начинается с заданной ширины / высоты. Затем, если пользователи вводят больше заданного количества места, текстовое поле расширяется вниз. Как мне это сделать? Я использую CSS? Базовое текстовое поле просто отображает полосу прокрутки, когда пользователи пропускают количество строк, разрешенное Как сделать так, чтобы текстовое поле расширяло строки, скажем, еще на 5? 

<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>

Как мне использовать пример, упомянутый Робертом Харви? Я никогда не использовал JavaScript раньше ..

Ответы [ 3 ]

5 голосов
/ 28 мая 2010

Плагин jQuery AutoResize
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Шаги для использования:

Вам нужен jQuery. Чтобы добавить его на свою страницу: 

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Затем скачайте плагин и поместите его в ту же папку, что и ваша веб-страница. Чтобы добавить ссылку, добавьте это на свою веб-страницу: 

<script type="text/javascript"
    src="autoresize.jquery.js"></script>

Затем добавьте текстовое поле на страницу: 

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;">
    Type something in here, when you get close to the end the box will expand!
</textarea>

Наконец, в блоке скрипта добавьте код, который подключает плагин к текстовому полю: 

<script type="text/javascript">
    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
            $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
</script>
4 голосов
/ 28 мая 2010

Вы можете добавить библиотеку, если хотите, или просто отслеживать свойство scrollTop текстовой области.

Если scrollTop не равен нулю, добавьте свои строки. 

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
    var who=document.getElementsByName('comments')[0];
    who.onkeyup=function(){
        if(who.scrollTop)who.rows=parseInt(who.rows)+5;
    }
}
</script>
</head> 
<body>
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>
1 голос
/ 30 декабря 2014

Вот мое решение с использованием только ванильного JavaScript.
Протестировано для работы в Chrome, Firefox и IE8 и выше.

Нагрузка или удар по функции: 

var element = document.getElementById('comments');
var retractsAutomatically = false;

var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;

var resize = function() {
    var length = element.scrollHeight;

    if (retractsAutomatically) {
        if (element.clientHeight == length)
            return;
    }
    else {
        element.rows = 1;
        length = element.scrollHeight;
    }

    element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};

//modern
if (element.addEventListener)
    element.addEventListener('input', resize, false);
//IE8
else {
    element.attachEvent('onpropertychange', resize)
    retractsAutomaticaly = true;
}

CSS & HTML: 

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...