Comment puis-je faire un <textarea>
redimensionner automatiquement avec son contenu (comme sur Facebook) en utilisant jQuery.textarea redimensionner automatiquement dans jquery
Répondre
Utilisez jQuery UI
Cocher cette démo: http://jqueryui.com/demos/resizable/#textarea
<script type="text/javascript">
function adjustTextarea(this_){
var value_ = this_.value;
value_ = value_.replace(new RegExp("\n\r", 'gi'), "\n");
value_ = value_.replace(new RegExp("\r", 'gi'), "\n");
var split_ = value_.split("\n");
this_.rows = split_.length;
return;
}
</script>
<textarea cols="100" style="overflow:hidden;" onkeyup="adjustTextarea(this);" onfocus="adjustTextarea(this);" >
Text
</textarea>
Excellente solution en javascript pur! – B4NZ41
Utilisez James Padolsey AutoResize plugin jquery de http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Utilisation de base
$('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
});
poids super léger:
Est-ce que quelqu'un a considéré contenteditable? Pas de déconner avec le défilement, et le seul JS que j'aime à ce sujet est si vous prévoyez d'enregistrer les données sur le flou ... et apparemment, il est compatible sur tous les navigateurs populaires: http://caniuse.com/#feat=contenteditable
comme une boîte de texte, et il s'autosise ... Faites sa taille min-hauteur de la hauteur de texte préférée et y avoir.
Ce qui est cool à propos de cette approche est que vous pouvez enregistrer et balises sur certains navigateurs.
http://jsfiddle.net/gbutiri/v31o8xfo/
<style>
.autoheight {
min-height: 16px;
font-size: 16px;
margin: 0;
padding: 10px;
font-family: Arial;
line-height: 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
resize: none;
border: 1px solid #ccc;
outline: none;
width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
var $this = $(this);
// The text is here. Do whatever you want with it.
console.log($this.html());
});
</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>
- 1. Redimensionner automatiquement TableLayoutPanel
- 2. Redimensionner une figure automatiquement dans matplotlib
- 3. Redimensionner automatiquement Silverlight 3 applications
- 4. Comment redimensionner automatiquement certains NSTableColumn?
- 5. Maxlength dans textarea utilisant jQuery
- 6. Redimensionner automatiquement les panneaux de SplitContainer
- 7. redimensionner automatiquement le contenu de l'étiquette
- 8. Comment redimensionner automatiquement le widget qt?
- 9. jquery et textarea
- 10. validation jQuery sur textarea
- 11. jQuery this() pour textarea?
- 12. Comment redimensionner automatiquement JFrame selon le contenu
- 13. Redimensionner automatiquement les grandes images avec JavaScript?
- 14. jquery valeur de textarea
- 15. jQuery Textarea focus
- 16. jquery préfixe textarea text()
- 17. Redimensionner textarea pour s'adapter à tout le contenu
- 18. Comment redimensionner automatiquement la table dans un DataGridView?
- 19. redimensionner taille de police dans la zone de texte automatiquement
- 20. Jquery: Comment trouver du texte dans textarea
- 21. Détection de contenu dans textarea (jQuery)
- 22. jQuery Colorbox Dynamic Redimensionner
- 23. Marque textarea avec readonly jquery
- 24. Redimensionner automatiquement la barre de défilement/le curseur horizontal personnalisé?
- 25. textarea, tinyMCE et insérer une image dans textarea
- 26. jquery redimensionner image et rotator
- 27. jQuery cycle redimensionner le problème
- 28. Redimensionner automatiquement la boîte de dialogue jQuery UI à la largeur du contenu chargé par ajax
- 29. Redimensionner le cadre avec jQuery
- 30. l'image jquery Redimensionner transition onMouseOver
Auto-Redimensionner selon quoi? L'élément contenant? La fenêtre? La longueur du texte? –
Je présume que vous voulez dire comme la zone de texte Safari/Chrome par défaut ... ou la zone de texte croissante comme sur Facebook? – scunliffe
comme livre de visage je veux redimensionner ma zone de texte quand j'entre plus de texte dans la zone de texte – picnic4u