Comment marquer un champ de saisie avec du texte plus long que sa largeur?
Étant donné un formulaire avec de nombreux champs de saisie, certains ont un texte long qui dépasse la largeur du champ de saisie. Je souhaite marquer ces champs de saisie d'une manière qui indique qu'ils ont plus de texte que ce qui est visible.
J'ai pensé à afficher une icône de flèche à droite de ces champs, mais je l'ai exclue, car l'utilisateur pourrait voir l'entrée à la fin de celui-ci, auquel cas, il y aurait plus de texte à gauche. Je souhaite le marquer d'une manière qui serait la plus évidente et d'une manière générale qui impliquerait fortement plus de texte à l'intérieur.
J'avais pensé à créer un curseur sous le champ de saisie qui indiquera la position actuelle,
quelque chose comme ça:
MISE À JOUR:
ok, j'ai un peu travaillé et fait un plugin (pas pour IE), jetez un oeil
Utilisez une zone de texte pour le texte qui ne rentre pas dans un champ de saisie normal.
Si vous ne pouvez pas modifier un champ de saisie, pensez à utiliser des points de suspension (...) sur lesquels vous pouvez cliquer/concentrer/survoler pour agrandir la taille du champ de saisie afin qu'il soit suffisamment large pour afficher tout le texte ou devienne une zone de texte qui révèle tout le texte.
Si vous ne pouvez pas modifier la forme ou la taille du champ de saisie, envisagez d'utiliser des points de suspension (...) qui peuvent être cliqués/concentrés/survolés pour afficher le reste du contenu du champ de saisie dans une fenêtre contextuelle ou un modèle d'interface utilisateur similaire. .
Modifiez la conception de votre formulaire afin que le texte entré dans les champs de saisie ne soit pas si long qu'il ne rentre pas dans le champ.
Pourquoi l'utilisateur voit-il des champs de saisie contenant déjà du contenu? S'agit-il d'un contenu modifiable? Si c'est supplémentaire, envisagez de déplacer le texte hors du champ de saisie et dans une étiquette qui se trouve à côté ou au-dessus du champ.
Je suis d'accord avec la suggestion de Rahul d'utiliser des points de suspension. Lorsque l'entrée n'a pas de focus, vous pouvez remplacer les derniers caractères visibles par un gris clair '...' Lorsque l'entrée a le focus, le contenu complet des champs doit être accessible sans les points de suspension.
Dans Adobe InDesign, les zones de texte avec du contenu supplémentaire ont un petit + dans une zone qui est placée dans le coin inférieur droit de la zone de texte. (Voici un exemple que j'ai trouvé pour illustrer ce que j'essaie de décrire: http://creativecurio.com/wp-content/uploads/2008/07/quark-indesign-text-link.gif ) Je ne sais pas ce que vous utilisez pour créer ce formulaire, donc cela peut ne pas être possible selon le degré de personnalisation possible.
J'ai vu des formes où les derniers caractères visibles avant le texte de débordement "disparaissent" dans un dégradé de transparence. Cela semble très bien, et il est clair ce qui se passe là-bas. Je ne me souviens pas où ...
Je n'ai aucune idée de comment tu l'as fait.
. . C'est mauvais aussi parce que l'utilisateur ne peut pas voir la quantité de texte.
Montrez également tout le texte en survol, comme l'a suggéré rahul.
La forme du champ de saisie lui-même doit être suffisamment indicatrice pour montrer la quantité de texte attendue ou attendue dans le champ:
- Si vous attendez une entrée courte => utilisez un champ de texte sur une seule ligne.
- Si vous vous attendez à une plus grande quantité de saisie => utilisez un champ de texte sur plusieurs lignes
Selon la quantité de texte, utilisez deux, trois lignes ou plus pour le champ de texte à plusieurs lignes. Ce que vous pourriez aussi faire, c'est couper la dernière ligne de ce champ.
Sortons des sentiers battus. Envisagez d'afficher la zone Points de suspension extérieur.
Pas de débordement
Débordement à droite
Débordement à gauche
Je 2e la suggestion pour Ellipsis, à la fois à gauche si le texte défile à gauche de la bordure et à droite s'il y a du texte à droite de la bordure.
Mais je ferais les points de suspension à la fois très petits (disons 50% de la police du texte) et une couleur différente, peut-être gris clair (en supposant du texte noir sur blanc). Vous avez juste besoin du repère visuel le plus subtil pour faire le point.
Utilisez simplement la zone de texte ou développez la zone de texte à une s'il y a plus d'une ligne de texte.