Textarea autogrow在Chrome中不起作用

问题描述：

我想要的是在输入文本或在其中粘贴一些文本时使Textarea自动增长。它与IE7，IE8和IE9，火狐工作正常。但是，在OPERA，CHROME和SAFARI中，即使我点击功能键/附加键（如Shift，Ctrl，向下箭头，向上箭头，向左箭头，向右箭头，Home，End，Delete等），它也会自动增长。Textarea autogrow在Chrome中不起作用

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>

答

不知道为什么它会在某些浏览器，但据我可以告诉你设置高度为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在按下箭头键，移位等时会增加高度，是否在上面提到的小提琴中这样做？ – adeneo

用代码创建一个HTML页面，并用Google Chrome打开它。现在，尝试添加一些文本。 Textarea每个关键点都在增加。 –

Textarea autogrow在Chrome中不起作用

相关推荐