I’m working on a three-part series of articles discussing and addressing the challenges of creating a multi-line text input component that auto-sizes to the user’s input, patches a copy/paste bug on the Mac, and supports multiple languages without localizing (unless you want to localize).
The articles and source code are based on an input component I built for a chat application, but apply to any input component that allows a user to enter an unrestricted amount of text. Like, a comments field, for example.
There are four aspects to a good text input component of this sort:
1) Predictable and sensible handling of long entries. In this case, we start with a single line text input of set width and provide logic to cause it to expand or contract vertically, as lines are added or removed (via line-wrapping or Shift+Enter). We also provide a max height at which the input stops expanding and displays a scrollbar.
2) Making sure, now that you’ve taken responsibility for the measuring of the text input, that descenders (the lower parts of characters like ‘g’) are not cut off, and that the text is vertically balanced (not too much space below or above).
3) Correct rendering of copy/paste. This is an issue because there is a bug in the Flash Player on OS X. The second article in this series will deal with this.
4) Support for multiple languages.
The first article in this series covers points 1 and 2, and it should be up later this week.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.