Comment créer une zone de texte en expansion?

Je veux faire un manuel où il commence comme une largeur/hauteur donnée. Ensuite, si les utilisateurs tapent plus que la quantité d'espace donnée, la zone de texte s'étend vers le bas. Comment vais-je faire cela? Est-ce que j'utilise CSS? La zone de texte de base affiche simplement une barre de défilement lorsque les utilisateurs dépassent le nombre de lignes autorisé. Comment est-ce que je fais en sorte que la zone de texte augmente les rangées de disons 5 de plus?Comment créer une zone de texte en expansion?

<form method="post" action=""> 
<textarea name="comments" cols="50" rows="5"></textarea><br> 
<input type="submit" value="Submit" /> 
</form>

Comment puis-je utiliser l'exemple que Robert Harvey mentionné? Je ne ai jamais utilisé auparavant .. JavaScript

Source

2010-05-27 jpjp

jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Procédure d'utilisation:

Vous devez jQuery. Pour l'ajouter à votre page:

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Ensuite, téléchargez le plug-in et le mettre dans le même dossier que votre page Web. Pour référencer, ajoutez à votre page Web:

<script type="text/javascript" 
    src="autoresize.jquery.js"></script>

Ensuite, ajoutez une zone de texte à votre page:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;"> 
    Type something in here, when you get close to the end the box will expand! 
</textarea>

Enfin, dans un bloc de script, ajoutez le code qui accroche le plugin la zone de texte:

<script type="text/javascript"> 
    $('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
      $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
      $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 
</script>

Source

2010-05-27 20:31:57

o qui est génial. juste ce dont j'avais besoin !! – jpjp

Je suis désolé mais je n'ai jamais utilisé jquery auparavant. Pourriez-vous me dire comment faire pour que cela fonctionne? J'ai téléchargé les codes et les mettre dans . Mais la boîte de texte est toujours la même – jpjp

Voici une bonne vidéo d'instruction: http://www.youtube.com/watch?v=Hk5oXFtYLwE Ou vous pouvez lire la documentation de jQuery: http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery – mVChr

Vous pouvez ajouter une bibliothèque si vous le souhaitez, ou simplement suivre la propriété scrollTop de la zone de texte.

Si scrollTop n'est pas égal à zéro, ajoutez vos lignes.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style> 
textarea{overflow-y:scroll} 
</style> 
<script> 
onload=function(){ 
    var who=document.getElementsByName('comments')[0]; 
    who.onkeyup=function(){ 
     if(who.scrollTop)who.rows=parseInt(who.rows)+5; 
    } 
} 
</script> 
</head> 
<body> 
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

Source

2010-05-27 21:50:59 kennebec

Nice, simple et sans bibliothèque, mais nécessite encore beaucoup de travail; [violon] (http://jsfiddle.net/h7jmmwcv/). Coller avec la souris (keyup non invoqué), entrer du texte par le haut (scrolltop non modifié), supprimer du texte (height not reduced), barre de défilement ennuyante inutile sont quelques unes des choses qui m'empêchent de vouloir l'utiliser – Hashbrown

est ici my solution utilise la vanille uniquement javascript.
Testé pour fonctionner dans Chrome, Firefox & IE8 et plus.

En charge, ou Whack en fonction:

var element = document.getElementById('comments'); 
var retractsAutomatically = false; 

var sizeOfOne = element.clientHeight; 
element.rows = 2; 
var sizeOfExtra = element.clientHeight - sizeOfOne; 
element.rows = 1; 

var resize = function() { 
    var length = element.scrollHeight; 

    if (retractsAutomatically) { 
     if (element.clientHeight == length) 
      return; 
    } 
    else { 
     element.rows = 1; 
     length = element.scrollHeight; 
    } 

    element.rows = 1 + (length - sizeOfOne)/sizeOfExtra; 
}; 

//modern 
if (element.addEventListener) 
    element.addEventListener('input', resize, false); 
//IE8 
else { 
    element.attachEvent('onpropertychange', resize) 
    retractsAutomaticaly = true; 
}

CSS & HTML:

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

Source

2014-12-30 01:20:30 Hashbrown

Comment créer une zone de texte en expansion?

Répondre

Questions connexes