Comment activer et désactiver le redimensionnement automatique d'un champ textarea avec l'add-on jQuery Autosize
Ce tutoriel va permettre à l'utilisateur d'activer ou désactiver le redimensionnement automatique des textarea en s'appuyant sur l'add-on jQuery Autosize.
Démonstration
Comment l'intégrer à votre site
Le fichier .js est à appeler après la zone textarea et après l'appel à la bibliothèque jQuery. Pour faire simple, il suffira de l'ajouter avant la fin de la balise fermante du body </body>.
Maintenant que nous avons la bibliothèque d'installer sur le site, on va l'utiliser sur les textarea qui nous intéresse.
Il est très simple d'utiliser notre script. Il suffit d'ajouter la balise <div class="oft_textarea_autoresize"> avant le textarea et </div> pour fermer après le textarea.
Exemple
<div class="oft_textarea_autoresize">
<textarea class="form-control"></textarea>
</div>
Le résultat sera le même que dans la démonstration ci-dessus.
Comment le paramétrer
Régler la langue
Il n'y a pas de langue par défaut. Il est par conséquent nécessaire de passer une langue dans tous les cas.
1. Premier cas si vous n'avez qu'une seule langue sur votre site.
Il suffit dans ce cas de changer la ligne d'appel à la fonction dans le fichier javascript. Ici il est indiqué 'en' pour english, mais il le 'fr' pour français est également disponible. La ligne est à la fin du fichier.
oft_textarea_autosize('en');
2. Vous devez supporter plusieurs langues sur votre site.
Comme dans le cas du site online-free-tools.com, nous utilisons plusieurs langues. Plutôt que je spécifier la langue à chaque fois, on a ajouté une ligne dans notre page pour que la langue soit disponible en javascript.
<script>
oft_lang = 'en';
</script>
Ensuite on utilise cette information lorsqu'on appelle le script. La ligne est question est à la fin du fichier javascript.
oft_textarea_autosize(oft_lang);
Ajouter une nouvelle langue
Le 'en' est modifié quand on vérifie la langue de la page dans le script. Il est peut-être intégré n'importe quand avant l'appel à notre script.
Il est très facile d'ajouter une nouvelle langue. Il suffit pour cela d'ajouter une ligne au tableau des langues avec la nouvelle. Ici nous allons montrer comment ajouter de l'espagnol par exemple.
Le code de base :
// Traductions
var oft_textarea_lang = {
'en' : {
'text' : 'Textarea autosize',
'disable' : 'Disable',
'enable' : 'Enable'
},
'fr' : {
'text' : 'Zone de texte auto-redimensionnée',
'disable' : 'Désactiver',
'enable' : 'Activer'
}
}
Devient :
// Traductions avec le support de l'espagnol en plus
var oft_textarea_lang = {
'en' : {
'text' : 'Textarea autosize',
'disable' : 'Disable',
'enable' : 'Enable'
},
'fr' : {
'text' : 'Zone de texte auto-redimensionnée',
'disable' : 'Désactiver',
'enable' : 'Activer'
},
'es' : {
'text' : 'Cuadro de texto automático de cambio de tamaño',
'disable' : 'Inhabilitar',
'enable' : 'Permitir'
}
}
Si vous avez des traductions que vous souhaitez proposer et faire intégrer dans notre version, n'hésitez pas à nous les partager dans les commentaires par exemple !
Style CSS
Le style du texte de la barre d'outils peut-être personnalisée. Il suffit de prendre ce bout de code CSS et le modifier en fonction de votre besoin.
.oft_textarea_container{
text-align:right;
color:#AAAAAA;
}
.oft_textarea_disable, .oft_textarea_enable{
color:#AAAAAA;
font-weight:bold;
cursor:pointer;
}
.oft_textarea_disable:hover, .oft_textarea_enable:hover{
color:#363636;
font-weight:bold;
cursor:pointer;
}
Description
L'add-on jQuery Autosize permet aux zones de texte de type textarea de se redimensionner automatiquement quand du texte tapé devrait être normalement caché. L'add-on permet de base d'activer et désactiver le redimensionnement via un bout de code javascript. L'amélioration qu'on vous propose permet directement aux visiteurs d'activer ou désactiver le redimensionnement automatique. En effet, quand le texte commence à être trop long, il devient parfois difficile pour l'utilisateur de naviguer dans la fenêtre.
Le script est très facile à utiliser. Il suffit d'ajouter de balises div avec la classe oft_textarea_autoresize autour de la zone textarea. Il n'y a pas besoin de spécifier le name ou l'id de la zone textarea. L'ajout des boutons pour l'utilisateur seront ajoutés automatiquement. Les langues proposées de base sont l'anglais et le français, mais nous allons expliqués comment ajouter vos propres langues ou personnaliser le texte.
Bugs possibles
Le problème qui devrait arriver le plus souvent c'est quand vous n'avez pas la toolbar qui ne s'affiche pas. Cela peut arriver quand vous ajouter un nouveau champs textarea et que vous n'appeler pas de nouveau le listener sur la zone.
Démonstration
(constatez que les options ne sont pas ajoutées)
oft_textarea_autosize(oft_lang);A quoi cela peut ressembler
Pour faciliter la compréhension de tout le monde voici, à quoi pourrait ressembler votre script HTML.
<body>
<form method="post">
<div class="oft_textarea_autoresize"><textarea name="content"></textarea></div>
<input type="submit" />
</form>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.autosize.js"></script>
<script src="/js/oft_textarea_autosize.min.js"></script>
<link rel="stylesheet" href="/css/oft_textarea_autosize.min.css">
</body>
Lien vers l'add-on Autosize : Autosize Textarea
Le script est maintenant un standalone et ne nécessite donc plus jquery, toutefois je préfère garder la version basée sur jquery.
Pierrick CUSSET
Autodidacte passionné par le web, je suis toujours à la recherche de nouveaux challenges.
Fondateur de Online-Free-Tools.com.
FR
EN