jQuery:在更改行时使textarea滑出?

时间:2012-11-01 01:18:59

标签: javascript jquery

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

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

morespace();通过按钮调用函数。

我想在发生这种情况时将框滑出来,有什么想法吗?

谢谢,这是我的代码:

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?";
}}

3 个答案:

答案 0 :(得分:3)

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

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

每次触发时都会增加40像素的高度,并且可以平滑地动画。如果要添加数字行,可以简单地计算出想要textarea的大小,然后将其设置为该高度的动画。

以下是此操作的JSFiddle link,您可能需要查看jQuery animate API

答案 1 :(得分: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 Link:http://jsfiddle.net/isochronous/fvtY7/

答案 2 :(得分:-1)

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

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

其中rows表示cahnge的属性,17表示要设置的值。 要获取当前使用的行数,请使用:

   var rows = $('#comment').attr('rows');