Question

当用户输入这么多字符以及点击按钮时，我有一个文本区域框，从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?";
}}

Answer 1

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

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

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

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

Answer 2

嗯，快速回答是使用某人已经做过的事情：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/

Answer 3

你也可以像这样使用jquery的attr（）：

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

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

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

jQuery：在更改行时使textarea滑出？

3 个答案: