Question

我想制作一本教科书，它以一个给定的宽度/高度开始。然后，如果用户输入的空间超过给定的空间量，则文本框会向下扩展。我该怎么做呢？我使用CSS吗？当用户传递允许的行数时，基本文本框只显示滚动条。如何使文本框再扩展5行呢？

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

我如何使用Robert Harvey提到的例子？我之前从未使用过JavaScript ..

Answer 1

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>

Answer 2

如果您愿意，可以添加库，或者只是跟踪textarea的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>

Answer 3

以下my solution仅使用vanilla 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＆amp; HTML：

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

如何制作扩展文本框？

3 个答案: