Textarea自动增长在Chrome中不起作用答案

【问题标题】：Textarea autogrow not working in ChromeTextarea自动增长在Chrome中不起作用
【发布时间】：2012-08-24 10:19:09
【问题描述】：

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

JQUERY 代码：

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

【问题讨论】：

标签： jquery textarea autogrow

【解决方案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

【讨论】：

我真的不明白？您是说当按下箭头键、shift 等时文本区域的高度会增加，它是否也在上面发布的小提琴中这样做？？
使用代码创建一个 HTML 页面并使用谷歌浏览器打开它。现在，尝试添加一些文本。每次按键时，Textarea 都会增加。
对我来说很好，但你遇到的问题是因为它会在每次击键时不断添加填充/边距，所以将填充/边距设置为零，问题就消失了，然后调整如果需要，可以通过将高度设置为 20 而不是 18 来设置大小，这样它会添加正确的数字。
感谢您的帮助.. 它在一个小问题上工作正常。当我使用 Backspace 或 Delete 按钮或其他方式删除一些文本时。 Chrome 中的文本区域高度没有减少。相同的功能也适用于 Internet Explorer。