Textarea autogrow ne fonctionne pas dans Chrome

Ce que j'essaie est de faire de Textarea autogrow lorsque vous entrez du texte ou collez du texte dedans. Il fonctionne très bien avec IE7, IE8 et IE9, Firefox. Mais, dans OPERA, CHROME et SAFARI il augmente automatiquement même si je clique sur les touches fonctionnelles/touches supplémentaires comme Shift, Ctrl, Flèche bas, Flèche haut, Flèche gauche, Flèche droite, Accueil, Fin, Supprimer, etc., aussi.Textarea autogrow ne fonctionne pas dans Chrome

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

Source

2012-08-24 Raju Sarvasiddi

Je ne sais pas pourquoi cela fonctionnerait dans certains navigateurs, mais pour autant que je peux vous dire que vous régler la la hauteur à 18, alors vous vérifiez si c'est 18 ou ci-dessous, et si c'est le cas, vous le mettez à 18. Comme la hauteur est définie et il n'y a pas de débordement visible, la hauteur ne sera jamais plus de 18, donc ça ne peut pas marcher.

Si vous vérifiez pour voir si c'est juste moins de 18 cela semble fonctionner bien pour moi? En outre, il est probablement pas une mauvaise idée de mettre en cache tout ce sélecteur vous continuez à utiliser partout:

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

Source

2012-08-24 10:56:08 adeneo

désolé, je ne ai pas expliqué clairement plus tôt. S'il vous plaît vérifier encore une fois .. –

Je ne comprends pas vraiment? Êtes-vous en train de dire que la zone de texte augmente en hauteur lorsque vous appuyez sur les touches fléchées, déplacez-vous etc. et est-ce que cela se produit également dans le violon affiché ci-dessus? – adeneo

Créez une page HTML avec le code et ouvrez-la avec Google Chrome. Maintenant, essayez d'ajouter du texte. Textarea augmente pour chaque keyup. –

Textarea autogrow ne fonctionne pas dans Chrome

Répondre

Questions connexes