Topic: Typecast Development

So I've started work on Typecast. I call it an Input Field Augmentation Library. The idea is to provide commonly used/desired functionality that isn't available in the plain'ol HTML input field. Some examples include auto-completion, suggestion and realtime masking. I've been working on it for less than a week--in my free time--so it's very much "in development" though the auto-complete/suggest functionality is pretty close to being done. There are of course a bunch of things I want to add (see the todo list on the Typecast page). Oh and for all you tech-heads out there, it's completely unobtrusive and fully OO. I also try and optimize the code as much as possible to keep the performance level decent.

If you're reading this, I'd like your feedback. Pleas, go mess around with it. Copy it, use it, try and break it. Let me know what you think and what you'd like to see.

Last edited by ara_p (2006-04-07 13:04:29)

Re: Typecast Development

I love the Typecast name, very cool. And so far, the development looks very slick as well. Everyone else should go check this out!

Give me liturgy or give me death.

Re: Typecast Development

Ack! I made a typo in the link to the Typecast page. It's fixed now, so enjoy!

Re: Typecast Development

That is very, very good. I am impressed (and that almost never happens). You could have saved me a day building an autosuggest feature which is way bloated and inefficient if you had done this a couple of month ago, but all is forgiven, seeing as it rocks! Keep up the good work, and I will pick it to bits when I get a bit more time!

Josh Townson

Re: Typecast Development

Hey, wow, thanks for the positive feedback. I should eventually post a "release" version and develop other features appart from it so as not to have people using potentially buggy code. For now though it's in full development mode until I get some more of the basics finished (i.e. I really want to get a basic version of the masking working).

Re: Typecast Development

That is sweet

Re: Typecast Development

Typecast 1.2.1 (development) is now online. Fixed the realtime masking problem in IE and made it a bit less fragile.

Last edited by ara_p (2006-04-08 14:41:17)

Re: Typecast Development

Typecast 1.2.2 (development) is now online. I've fixed up the realtime masking and it's working quite well. I need people's feedback on the way that it works though because the backspace/del feels like it's an old-school dumb terminal. Then again, it behaves like the INS key is active so maybe it's okay. Please lemme know! (and enjoy! ;-)

Last edited by ara_p (2006-04-08 14:40:58)

Re: Typecast Development

Typecast 1.3 (development) is now online. Realtime masking now supports alpha and numeric characters and is working better than ever before. For example you're no longer limited to using the mask characters in your field like so: ##/##/####. Now you can do this: mm/dd/yyyy and still have it only accept numeric characters for the input. I've put together a few examples to illustrate the new functionality and I've even included some implementation instructions!

Once again, all feedback is appreciated. Enjoy! :-)

Last edited by ara_p (2006-04-08 21:45:33)

Re: Typecast Development

Gets better every minute wink

Re: Typecast Development

Looks awesome, as it did before...

A couple of my thoughts about the masking - I'd like the backspace button to just delete the current character (like the delete button), rather than move to the previous character after deleting, or possibly delete the previous character. (I don't know which one makes more sense now). Also, I think it would be best to move on to the next input field when you complete the masked field, but I'm not sure this is the most expected behavior.

Anyway, tremendous work, I'm looking forward to the Ajax power version!

Josh Townson

Re: Typecast Development

bfjosh/all: Hey, I got the backspace working better and then I set out to tackle the delete button (to make it really work like a real delete button) and got a little bogged down. getting all the characters to shift left by one turned out to be a bit harder than I'd thought. It works now but I'm having a bit of a hard time "revealing the mask" as the last character entered shifts over... I don't know if I'm making much sense--not easy to explain--but all that to say that I came to the realization that I needed to change some of the base code to get it to work properly  (need to spend a little time thinking about it).

Also, a couple of people have pointed out that the rel="" attribute breaks the validator so I'm considering either putting the mask in the title="" attribute or in a completely separate namespace like tc:mask="". The latter may cause trouble across different browsers. We'll see.

No new releases just yet though until I get the delete button working.

Re: Typecast Development

I've put Typecast 1.3.1 up because the cursor and backspace problems have been fixed and I think I was able to turn the browser's autocomplete box off which was conflicting with the Typecast one. But, I'm reworking the entire masking "engine" so as to get it to behave exactly like a regular input field would when it comes to selection, backspacing, deleting etc... right now the characters don't shift over when you delete or backspace. That'll be fixed soon (in the next release hopefully).

In the meanwhile: Would you prefer to define the mask in the input field (in an attribute) or in the typecast.config.js file? I'm leaning toward the latter... makes for a cleaner implementation.

Re: Typecast Development

I'm still getting the browser suggest pull-down... (FireFox on XP Pro) link to screenshot

I also wanted to point out that you might want to find a way to use both...   At work, we intentionally use the same input name/id as our competitors so that folks are prompted to enter the same info to us as to our competitor... which means from a business sense, we wouldn't use anything that disabled the browser's auto-complete.

Last edited by Colin (2006-04-12 17:32:02)

Re: Typecast Development

Typecast 1.4 (release) is out! I've gotten the realtime masking--finally--working like I wanted it to (though there is a bit more work to be done for "complex" masks as well as the addition of regex support). Next though I think I'll concentrate on making the Suggest behaviour Ajax pluggable. The tough part will be in making it smart enough not to hit the server on every keypress.

Colin: I wasn't able to see the browser's auto-complete pull-down but I've made the disabling of it configurable, so you can control that now. I'll have to make the positioning of the Suggest output area configurable to so as not to conflict with the browser's own window.

K, well I'm off to bed. Lemme know what you think...

Re: Typecast Development

Ara, hopefully I can save you some time here... about stopping the server being hit for every keypress...

function something(oEvent) {
  if (typeof(window['typecast_timer']) != "undefined") { window.clearTimeout(typecast_timer); }
  switch (oEvent.keyCode) {
    case 38: //up arrow  
    case 40: //down arrow
    case 37: //left arrow
    case 39: //right arrow
    case 33: //page up  
    case 34: //page down  
    case 36: //home  
    case 35: //end                  
    case 13: //enter  
    case 9: //tab  
    case 16: //shift  
    case 17: //ctrl  
    case 18: //alt  
    case 20: //caps lock
      return true;
    case 27: //esc
  typecast_timer = window.setTimeout(theRealFunction,400);

This is what I used on my livesearch, basically checking if there is a timer set already, and clearing it if there is, then starting it again. Once the timeout elapses without a key being pressed, it moves on to theRealFunction, which in my case was the Livesearch code.

I've also included my list of keycodes for which I don't want a request sending. Hopefully this is helpful for you.

Josh Townson

Re: Typecast Development

I use your methods for text and numerical inputs.  Is there a way to make it work for wild card quantities or for email addresses?
where left of @ is anything and right of at is fixed or variable?

i.e. A*@A*

Can you use regex to specify mask?

Re: Typecast Development

Well, I guess it would also be nice if there's a way we could put limits to numerical inputs.  The best example to this is when entering the time either in 12-hour or 24-hour mode.  For the minutes and seconds portion, we could limit the input to 59 while for the hour, the limits would be between 1 and 12 for 12-hour mode and up to 23 for the 24-hour mode.

Re: Typecast Development

Very cool, I like it as well!  My only complaint right now is the browser's auto-fill dropdown covers up the dropdown from typecast - I'm using Firefox 3.0RC3 on OSX.

Is this even possible to disable? I'd imagine you can somehow. screenshot

Re: Typecast Development

Does anyone have problem with typecast in IE6? Works fine on IE7 and Firefox, but in IE6, the mask does not appear in the fields.

Thank you in advance.

Re: Typecast Development

Got this error when i'm using the mask in Internet Explorer 6:

'TypeCast.Config.Data' is null or not an object.

Anyone got an idea?


Re: Typecast Development

I've noticed what appears to be a bug and possibly a suggestion

I'd like to use the Typecast library to produce a percentage mask that might look like the following...


First, the bug...
It seems that if the % sign is the last character in the mask it gets dropped. In order for the mask to work, I would need to add a character AFTER the percent sign. Shouldn't any decoration remain as part of the mask regardless of where it appears?

Second, the suggestion...
It might be nice if I could specify an arbitrary number of # characters so the mask could accommodate


just as easily as it could accommodate