1

当用户输入这么多字符以及单击按钮时，我有一个从 3 行扩展到 17 行的文本区域框。

SetNewSize(); 函数是通过 onkeyup 调用的，当长度大于 50 时扩展文本区域。

更多空间（）; 函数通过按钮调用。

发生这种情况时，我想将盒子滑出，有什么想法吗？

谢谢这里是我的代码：

function SetNewSize(textarea){
if (textarea.value.length > 50)
{
    textarea.rows = 17;
}
else
{
    textarea.rows = 3;
}}

function morespace(){
var thetxt = document.getElementById('more').value;
var box = document.forms["myForm"]["comment"];
if(box.rows == 3)
{
    $("#emailme").fadeOut(800);
    box.rows = 17;
    document.getElementById('more').innerHTML = "less space?";
}
else
{
    $("#emailme").fadeIn(800);
    box.rows = 3;
    document.getElementById('more').innerHTML = "more space?";
}}
4

3 回答 3

3

通过“滑出盒子”，我猜你的意思是动画它。虽然您可能无法在 jQuery 中为 textarea 行设置动画，但您可以height为 textarea 设置动画以给用户更多空间。例如，你触发了这样的事情：

$('#comment').animate({'height': '+=40'},200);

这将在每次触发时增加 40 像素的高度，并使其动画平滑。如果要添加数字行，您可以简单地计算您希望 textarea 变为多大，然后将其设置为动画高度。

这是此操作的JSFiddle 链接，您可能想查看jQuery animate API。

于 2012-11-01T01:33:03.927 回答
0

好吧，快速的答案是使用某人已经制作的东西：https ://github.com/gurglet/jQuery-Textarea-Autoresize-Plugin

但是，如果您想自己动手，我稍后会用您需要的代码更新我的回复。

更新的答案：假设你有这个 HTML：

<button id="emailme">Email me</button>
<form id="myForm">
    <input id="more" name="more" type="text">
    <textarea id="comment" name="comment" rows="3">

    </textarea>
</form>

然后你可以使用这个脚本：

(function(){
    var BIG = 17,
        SMALL = 3,
        currentSize = SMALL,
        changeSize = function(rows) {
            var $more = $("#more"),
                thetxt = $more.val(),
                $box = $("#comment"),
                currentRows = $box.prop("rows"),
                boxRowHeight = $box.height()/currentRows,
                newHeight = rows * boxRowHeight;

            if (rows === currentRows) return;       

            return $box.animate({'height': newHeight }, 500 , "swing", function(){
                $more.val((currentRows > rows) ? "more space?" : "less space?");
                $box.prop("rows", rows);
                currentSize = rows;
            }).promise();
        },
        setNewSize = function(event) {
            var $area = $(event.target);
            if ($area.val().length > 50 && currentSize === SMALL) {
                changeSize(BIG);
                currentSize = BIG ;
            } 
        };



    $("#comment").bind("keyup", setNewSize);

    $("#more").click(function(){
        if (currentSize === BIG) {
            $.when(changeSize(SMALL)).then(function(){
                $("#emailme").fadeIn(800);
            });
        }else{
            $.when(changeSize(BIG)).then(function(){
                $("#emailme").fadeOut(800);
            });            
        }

    });            
}​)();​

JSFiddle 链接：http: //jsfiddle.net/isochronous/fvtY7/

于 2012-11-01T01:30:09.170 回答
-1

你也可以像这样使用 jquery 的 attr() ：

$('#comment').attr('rows', 17);

其中行表示要更改的属性，17 表示要设置的值。要获取当前使用的行数，请使用：

   var rows = $('#comment').attr('rows');
于 2012-11-01T01:36:56.527 回答