Comment construire un plugin JQuery en expansion automatique, partie 1

Les zones de texte en expansion automatique sont très populaires sur des sites comme Facebook. La hauteur de la zone de zone de texte se développe et rétrécit en fonction de la quantité de texte saisie par l'utilisateur. Cela présente plusieurs avantages:

1. La conception de votre page ne sera pas dominée par les grandes boîtes de zone de texte.
2. Les formulaires en ligne avec plusieurs zones de texte semblent plus courts et plus faciles à remplir.
3. Les utilisateurs peuvent afficher tout le texte sans défiler.

Afficher la démonstration de zone de texte étendue ...

Ce didacticiel en trois parties décrit comment créer une zone de texte étendue automatiquement à l'aide de HTML et du plug-in jQuery réutilisable. À la fin de la troisième partie, vous comprendrez comment cela fonctionne et aurez du code qui peut être utilisé dans votre propre projet.

demande

Comme tous les bons développeurs, nous devons comprendre pleinement les exigences du système:

1. Toute zone de texte sur n'importe quelle page doit être automatiquement élargie si nous en avons besoin.
2. Cependant, certaines zones de texte peuvent ne pas nécessiter une expansion automatique.
3. Nous devons être en mesure de spécifier que la hauteur de la zone de texte peut (a) se développer infiniment, ou (b) se développer dans une plage spécifique, par exemple, utilisez la hauteur optimale entre 50 et 200 pixels.
4. Notre solution doit être réutilisable sur toute page que nous choisissons.
5. La technologie d'amélioration avancée doit être utilisée pour s'assurer que les utilisateurs sans JavaScript peuvent toujours utiliser la zone de zone de texte standard.
6. Cette solution doit être compatible avec IE6, Firefox 2, Opera, Safari et Chrome.

proposition

Nous implémentons la solution en tant que plugin jQuery. JQuery est principalement utilisé pour gérer les aspects plus banals tels que le reniflement DOM et la déléguation des événements; vous pouvez facilement réécrire votre code à l'aide d'un autre cadre.

Cependant, comment savons-nous quand nous devons redimensionner la zone de texte et quelle hauteur utiliser?

Tout d'abord, nous pouvons attribuer un gestionnaire d'événements "Keyup" à n'importe quelle zone de texte. Cela appellera une fonction immédiatement après que la touche soit enfoncée et que le texte est modifié.

Nous pouvons ensuite vérifier la propriété DOM ScrollHeight. Cela renverra la hauteur de la pièce de défilement interne, c'est-à-dire la hauteur du texte entré par l'utilisateur. Si nous définissons la hauteur de la zone de texte sur la valeur actuelle de défilement, la barre de défilement deviendra sans importance. Malheureusement, ScrollHeight n'est pas une recommandation W3C, et nous devons surmonter certaines incohérences entre les navigateurs:

• Dans Firefox, Safari et Chrome, ScrollHeight n'est jamais plus petit que la hauteur de la zone de texte, même si le texte n'est pas ajouté. Ainsi, la boîte se développe, mais la suppression du texte ne le rétrécira pas. Nous pouvons résoudre ce problème en définissant temporairement la hauteur de la zone de texte sur 0px, puis en appliquant la valeur réelle ScrollHeight.
• Contrairement à la documentation de Mozilla ScrollHeight, Firefox ne semble pas inclure le rembourrage de la zone de texte, tandis que Safari 4 et Chrome 2 le contiennent. Si nous avons un rembourrage de 2px en haut et en bas, ScrollHeight sera 4px plus grand dans le navigateur WebKit et la hauteur de la zone de texte augmentera infiniment. La soustraction du rembourrage cassera Firefox, donc la solution la plus simple consiste à appliquer le rembourrage vertical de 0px à nos éléments de zone de texte étendus.
• ScrollHeight est bizarre dans IE et Opera. Il renvoie généralement la véritable hauteur du texte interne, cependant, la définition de la hauteur de la zone de texte à 0px renvoie une valeur de défilement incorrecte. Bien que le reniflement du navigateur soit terrible, je ne pense pas que nous ayons d'autres options dans ce cas. Nous devons nous assurer que IE et Opera ne définissent jamais la hauteur de la zone de texte à 0px.

Nous devons également considérer la barre de défilement. Par défaut, la plupart des navigateurs affichent uniquement les barres de défilement de zone de texte en cas de besoin. Cependant, si nous définissons le débordement sur "Auto", la barre de défilement apparaîtra lorsque nous ajoutons une nouvelle ligne, puis disparaîtrons lorsque nous changeons la hauteur de la zone de texte. La définition du débordement sur "caché" résoudra le problème de la barre de défilement clignotante, mais cela ne doit jamais être appliqué à des zones de texte non étendues ou à des zones de texte qui ont été étendues au-delà de leur hauteur maximale spécifiée.

Enfin, le redimensionnement des fenêtres du navigateur peut être un problème. La conception de sites Web fluides peut implémenter des zones de texte avec une largeur basée sur le pourcentage: le redimensionnement des fenêtres redimensionnera la boîte. Bien que nous puissions détecter le redimensionnement des fenêtres, l'événement fonctionne mal dans IE et appelle rapidement les gestionnaires. Nous pouvons résoudre ce problème, mais la redimensionnement de plusieurs zones de texte peut entraîner des sauts et confondre la conception des pages et confondre les utilisateurs. Ainsi, après le redimensionnement, nous allons ajuster la hauteur de la zone de texte après que les commutateurs utilisateur se concentrent sur la case.

Il y a beaucoup de contenu à absorber, et il y en a plus! Faites-vous une tasse de café et préparez-vous pour la deuxième partie ...

• Partie 2: Initialisation de la zone de texte
• Partie 3: Code du plugin JavaScript
• comment développer le plug-in jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!