Typecast 1.4 (release)
The Input Field Augmentation Library
About
What is it?
Typecast is an Input Field Augmentation Library. When complete it will add autocomplete, suggest and realtime character masking ability to the standard HTML input field. And who knows, it'll probably end up doing even more! I'm currently working on the Suggest functionality which is coming along nicely.
Unobtrusive
Typecast requires no JavaScript code in the <body>. Rather it scans the document on load and binds the appropriate Typecast Behaviours to the fields based on the information you specify in the field's rel attribute.
Smart
Currently, Typecast Suggest binds a field to a dictionary based on its id. If it doesn't find a dictionary with a name that corresponds to the field's id it falls back to the default dictionary.
Ajax Ready
Typecast is planned to be Ajax ready by abstracting its dictionary binding via a Bind() method (planned, not yet implemented) which will do all the legwork of hooking your field up to the appropriate backend and/or locally defined JS array/object.
Bug Reporting & Feedback
Bug reports, desired features, questions and comments are all appreciated. You can contact me via my contact form.
Changelog
- 1.4 (release)
- Typecast has graduated to "release" status. I decided to keep the version number instead of reseting it so as to avoid confusion.
- Mask: Major rewrite. The entire masking engine has been streamlined and rewritten.
- Mask: Left, right, up and down keys as well as mouse clicks are all marshalled by the Mask Index disallowing the cursor to be in non masked character positions.
- Mask: Support for Insert key added. Each field remembers last insert/overwrite state.
- Mask: Auto-detects if mask contains mixed mask characters (i.e. postal code example) and forces character insert off. (You can't shift characters through the mask when the next character over may not be a number but a letter).
- Mask: Mask can be defined in either the class attribute of the input field or in the Typecast.config.js file. This is largely due to FF's lack of support for multiple spaces in a class name thereby denying you the ability to enter default text that consists of spaces.
- Suggest: Results in output area are now alphabetically sorted
- Suggest: Turning off the browser's autocomplete (not sure if it works) is now configurable.
- Suggest: Dictionaries location changed from Typecast.Config.Data.Dictionaries to Typecast.Config.Data.Suggest.Dictionaries.
- Suggest: Added "IEForceRelative" setting to force the output area's parent object to position "relative" (this is for IE who defaults to "static" as opposed to FF who defaults to "relative")
- 1.3.2 (development)
- Fixed "double scan" bug by stripping out bulky recursive document parsing routine and replacing it with
document.getElementsByTagNames("input")... *blush* we will never speak of this again. - Fields now remember their last cursor position
- Fixed "double scan" bug by stripping out bulky recursive document parsing routine and replacing it with
- 1.3.1 (development)
- Fixed strange backspace behaviour
- Cursor now behaves like a normal cursor and defaults to unselected characters
- Browser's default autocomplete is now turned off for suggest/autocomplete fields (someone please confirm this)
- 1.3 (development)
- Typecast now supports basic (alpha and numeric) realtime field masking
- 1.2.2 (development)
- Added backspace, del, keypad support and tightened down control even more
- Added "revert to mask character" when backspacing and deleting
- 1.2.1 (development)
- Strengthened the realtime masking and made it work in IE
- 1.2 (development)
- Added fragile, incomplete, rudamentary Realtime Masking support ;-) (consider it a teaser demo)
- Removed left/right key tie-in to up/down key behaviour in Suggest
- 1.1 (development)
- Added Auto-Complete support
- Fixed a few more bugs (see below)
- Did a little more optimizing
- 1.0 (development)
- First version number, though it's a development version number and not a release version number.
- Plenty of code optimization including:
- No longer calling the Render() method on every keypress when scrolling up and down through the results (speeding things up)
- Replacement of Create/Destroy of output area with Show/Hide (speeding things up)
- Optimized usage of getElementById() so as not to use it unnecessarily
- Optimized usage of eval(), again, so as not to use it unnecessarily
- Improved keyhandler functionality
- Implemented dynamic positioning of output area
To Do
Suggest
- Introduce boolean config: enableSuggest (if false then defaults to autocomplete)
- Disable browser's auto-complete window (history of previously typed stuff). Thanks Patrick!
- Dictionary lookup abstraction allowing Ajax integration
- Accent insensitive option
- Position resultset window above field if there is no room below it (near the bottom fo the window)
Sort/alphabetize outputTweak positioning of resultset window (kinda faking it right now)Dynamically position resultset window under fieldTab key to function as down button (Shift+Tab like up button)(opted not to make it behave like down button. does select first suggestion and moves on (due to autocomplete))onkeydown support for fast scrolling through resultsAutocomplete (partial text select in input field) integration (suggestion window will simply be a flag augmenting autocomplete)
Mask
- Regex support
Introduce boolean config: highlight character (for mask) if false, just show cursor- Reset CharIndex when clicking with mouse.
Pull mask from rel attribute rather than value due to refresh problem (see bugs below). This will also allow you to define a ##/##/#### for date of birth but put mm/dd/yyyy in the actual input field.Masking pattern to be input value (maybe only simple patters, i.e.: (###) ###-####Complete Backspace support (reverts to mask character)
Other
- Subdivide library to allow for selective inclusion of behaviours instead of one gian bulky .js file
- Error/Warning/Help message callout functionality for situations like incorrect keystrokes or data entry instructions
- Support for multiple behaviours per field
Known Bugs
Hitting refresh with data in the field will cause the default text to be "lost" as it's only entered as the input field's value attribute... this used to cause the loss of the mask itself but that's now defined in the "rel" attribute so it remains safe.Look into "double scan" of DOM when running main Parse routineHitting refresh with data in a masked field will cause the mask to be redefined with the data rather than the original mask information.When in new field (tab) and output area is reactivated (arrow) old results appear (must rerun lookup)Fix up/down after esc bug (must check to see if output window exists, if not create/render)Fix case sensitivity/highlight bugTrap shift key as it triggers the output area when in combination with shift+tab
This work is licensed under a Creative Commons Licence.