0

我正在尝试的是在您输入文本或在其中粘贴一些文本时使 Textarea 自动增长。它适用于 IE7、IE8 和 IE9、Firefox。但是，在 OPERA、CHROME 和 SAFARI 中，即使我单击功能键/附加键（如 Shift、Ctrl、向下箭头、向上箭头、向左箭头、向右箭头、Home、End、Delete 等），它也会自动增长。

查询代码：

<script type="text/javascript">
function txtareaAutoGrow(txtar, clkBtn){
    // txtareaAutoGrow() start here
$("#"+txtar).height(18);

    $("#"+txtar).keyup(function(){
        if ($("#"+txtar).height() <= 18){
            $(this).height(18);
            }
        else {
            $(this).height($("#"+txtar).prop("scrollHeight"));
            $("#"+txtar).bind('paste', function() {
                setTimeout(function() {
                $("#"+txtar).height($("#"+txtar).prop("scrollHeight"));
            }, 100);            
    });
            }
        });


    $("#"+clkBtn).click(function(){
        if ($("#"+txtar).height() <= 18){
                $("#"+txtar).height($("#"+txtar).prop("scrollHeight"));
            }
            else {
                    $("#"+txtar).height(18);
                }
        });
    // txtareaAutoGrow() end here
};
</script>

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Resize TEXTAREA</title>
<style type="text/css">
textarea {
        overflow:hidden;
        resize: none;}
</style>

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="autoresizeTextarea.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    txtareaAutoGrow("txtar1", "btnXpand1");
    txtareaAutoGrow("txtar2", "btnXpand2");
});
</script>
</head>

<body>
<p>
    <textarea cols="100" id="txtar1"></textarea>
    <input type="button" id="btnXpand1" value="Expand/Collapse" />
    <p>&nbsp;</p>
    <textarea cols="100" id="txtar2"></textarea>
    <input type="button" id="btnXpand2" value="Expand/Collapse" />
</p>
<p>
    <!--<input type="button" id="Heght" value="Height" />
    <input type="button" id="scrlHeight" value="Scroll Height" />
    <input type="button" id="btnXpand" value="Expand/Collapse" />-->
</p>
</body>
</html>
4

1 回答 1

0

不知道为什么它会在某些浏览器中工作，但据我所知，您将高度设置为 18，然后您正在检查它是否为 18 或以下，如果是，您正在设置它到18。由于设置了高度并且没有可见溢出，所以高度永远不会超过18，所以它不能工作。

如果您检查它是否小于 18 似乎对我来说工作正常？此外，仅缓存您在任何地方都使用的选择器可能不是一个坏主意：

function txtareaAutoGrow(txtar, clkBtn) {
    var txtA = $("#" + txtar);

    txtA.height(18).keyup(function() {
        if (txtA.height() < 18) {
            $(this).height(18);
        }
        else {
            $(this).height(txtA.prop("scrollHeight"));
            txtA.bind('paste', function() {
                setTimeout(function() {
                    txtA.height(txtA.prop("scrollHeight"));
                }, 100);
            });
        }
    });

    $("#" + clkBtn).click(function() {
        if (txtA.height() < 18) {
            txtA.height(txtA.prop("scrollHeight"));
        }
        else {
            txtA.height(18);
        }
    });
};

$(document).ready(function() {
    txtareaAutoGrow("txtar1", "btnXpand1");
    txtareaAutoGrow("txtar2", "btnXpand2");
});​

小提琴

于 2012-08-24T10:56:08.460 回答