扩大textarea的高度

时间:2017-01-25 06:59:15

标签: javascript jquery html html5 jsfiddle

我创建了这些代码,当文本内部超出textarea的高度时自动扩展textarea高度,但这只适用于jsfiddle,但是当我在我的项目中运行时,这不起作用。有人能帮助我吗?感谢。



 $("#ta").keyup(function (e) {
        autoheight(this);
    });
    
    function autoheight(a) {
        if (!$(a).prop('scrollTop')) {
            do {
                var b = $(a).prop('scrollHeight');
                var h = $(a).height();
                $(a).height(h - 5);
            }
            while (b && (b != $(a).prop('scrollHeight')));
        };
        $(a).height($(a).prop('scrollHeight') + 20);
    }
    
    autoheight($("#ta"));

 #ta {
        width:250px;
        min-height:116px;
        max-height:300px;
        resize:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta"></textarea>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

如果您正在使用jquery,则必须加载Jquery库并在文档就绪或窗口加载中添加代码。以下是更新后的代码:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

</style>

<script>
$(document).ready(function(){
$("#ta").keyup(function (e) {
    autoheight(this);
    console.log("log");
});
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));
</script>

</head>
<body>

<textarea id="ta"></textarea>

</body>
</html>

答案 1 :(得分:0)

它在IE 11中也适用于我,在IE中尝试以下js小提琴链接 -

https://jsfiddle.net/wp3wvuj2/3/

$(document).ready(function(){
$("#ta").keyup(function (e) {
autoheight(this);
console.log("log");
});
});

 function autoheight(a) {
if (!$(a).prop('scrollTop')) {
    do {
        var b = $(a).prop('scrollHeight');
        var h = $(a).height();
        $(a).height(h - 5);
    }
    while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));