Question

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

JQUERY CODE：

<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 CODE：

<!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>

Answer 1

不确定为什么它会在某些浏览器中起作用，但据我所知，你将高度设置为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");
});

FIDDLE

Textarea autogrow无法在Chrome中运行

1 个答案: