Meio Código

Meio.Autocomplete Docs and Demos

Yeah, we haven’t posted for a while, but it’s time to show you some great code I’ve been working on these days.

I’ve been searching for a good auto-complete plugin for a while. Found some good ones but none of them is perfect and I sometimes had to change their codes to get what I wanted on my projects. So I got tired and decided that I should do my own. My “perfect” one.

Basically I wanted an auto-complete plugin that would act as a select DOM element, which means, when I select a value on the auto-complete list the id of this option is setted somewhere (a hidden field for example) and I needed to have access to the “select” and “deselect” events, that would be fired when I select and deselect an option, respectively.

Meio.Autocomplete does all these simple tasks and more. It’s full of options and I made it in a way that it would be easy to set it up. I really recommend you to take a look at its documentation and see the demos to understand how it works. You can change the demos code too if you wish and run the resulting code, thanks to Mooshell.

I’m open to new ideas, bug fixes, new options etc… Feel free to comment and ask anything (help included) on the documentations page.

Meio.Autocomplete Docs and Demos

Have you ever had problems with the ‘change’ event? I did, in particular on text-inputs.

I’ll list the crazy behaviors i don’t like about it:

• If you change the value of a text input and submit the actual form by pressing enter, on Opera the change event won’t fire!;
• If you apply keydown, keypress or keyup and any of them returns false (this is used on meioMask and most of the plugins that filters the input from the user), the change event won’t fire!;
• If you focused on a text input and some script you made changes the value from this input, when you blur it the change even’t won’t fire!;
• On IE, if you choose one of the native auto-complete options that is shown when you focus without typing anything, change event won’t fire!

That’s why i created this new glossy ‘changed’ event, which is the change event but fixing all these problems i listed. It uses the power of the Mootools custom events to create this new event that can be used like any other event.

I’ve created a page to show it working.

/**
 * @author Fábio Miranda Costa <fabiomcosta [at] gmail [dot] com>
 * 09-07-2009
 * http://www.meiocodigo.com
 * Changed Event for Mootools 1.2.x
 */</p>

<p>(function(){</p>

<pre><code>var $ = document.id || $;
var STORAGE_VALUE = 'changed-event-value-storage';
var lastFocused = null;
var focusFunc = function(){
    lastFocused = this;
    this.store(STORAGE_VALUE, this.get('value'));
};
var submitFunc = function(e){
    if(check.call(lastFocused)){
        lastFocused.fireEvent('changed');
    }
};
var check = function(e){
    var storedValue = this.retrieve(STORAGE_VALUE);
    // this happens when you focus the input before adding the changed event on the input
    if(storedValue === null) return false;
    return this.value !== storedValue;
};

Element.Events.changed = {
    base: 'blur',
    onAdd: function(){
        var evts = this.retrieve('events');
        if(!(evts &amp;&amp; evts.focus &amp;&amp; evts.focus.keys.contains(focusFunc))){
            this.addEvent('focus', focusFunc);
            var formEl = $(this.form), fevts = formEl.retrieve('events');
            if(!(fevts &amp;&amp; fevts.submit &amp;&amp; fevts.submit.keys.contains(submitFunc))){
                formEl.addEvent('submit', submitFunc);
            }
        }
    },
    condition: function(e){
        e.type = 'changed';
        return check.call(this, e);
    },
    onRemove: function(){
        var evts = this.retrieve('events');
        if(!evts.changed.keys.length){
            this.removeEvent('focus', focusFunc);
            if(lastFocused == this) lastFocused = null;
            if(!submitInputs.length){
                $(this.form).removeEvent('submit', submitFunc);
            }
        }   
    }
};
</code></pre>

<p>})();

I’m sorry about the entities errors on the code, its this f…. s…. blog system that simply can’t do it right. If anybody know how to solve this, please let me know.

It won’t hurt if i remember that it should only be used on text inputs (it wont work as expected on radiobuttons and checkboxes) and you should apply the event before you focus the element (its kind of obvious but as i said, it won’t hurt).

Did i tell you that Mootools rocks?

meioMask 1.1.3 is out! sorry for this little interval between the versions but the last one would break on IE on a certain situation, explained below on the changelog.

Everyone that has 1.1.2 working ok is hardly encouraged to change to 1.1.3.

meioMask for jQuery

meioMask for Mootools!

meioMask’s page at jquery.com

meioMask’s Git project page

Features

• Accepts paste event;
• Has fixed, reverse (currency) and repeat mask types;
• You can still use your hot keys and others (ex: ctrl+t, ctrl+f5, TAB …);
• Supports metadata plugin;
• Works with iPhone;
• Allow default values;
• Has callbacks for invalid inputs, valid and overflow;
• Has function to mask strings;
• Support for positive and negative numbers on reverse masks;
• Can auto-focus the next form element when the current input is completely filled.

Changelog

v1.1.3

• a minor bug on _keyPressReverse that may break 1.1.2 on ie when a char is typed in a text input that had its content selected by any range;
• FIxed the onchange event on ie in masks that have type fixed.

v1.1.2

• Set defaultValue property of the input. This fixes the behavior of the reset button on forms. Now the value will be reseted to the masked value;
• âêô were added to the ‘@’ rule;
• Fix for the auto-tab feature, it now focus just on visible form elements;
• Added setSize option. It sets the input size based on the length of the mask (work with fixed and reverse masks only).

v1.1.1

• Fixed caret bug on ‘repeat’ masks;
• Fixed keyup event on fixed masks, it is now firing propertly;
• Added selectCharsOnFocus option;
• Added textAlign option.

v1.1

• Mask type ‘infinite’ is now called ‘repeat’ (using ‘infinite’ still works but it is deprecated). It now allows a maxLenght value to be set. MaxLength can be set by the maxLength attribute of the element or the maxLength option;
• You can easily set an autoTab option that will focus the next form element when the masked input is totally filled. It is true by default but you can put a jQuery selector string to match the next element you want to be focused.
• Deprecated ‘unmaskVal’ function. This function is too buggy… works for most cases but not all. The best way to unmask a value is by doing it yourself;
• The fixedChars option is not global anymore, giving more flexibility for the masks;
• ‘phone-us’ mask is now ‘(999) 999-9999′;
• Correctly fires the onChange event on reverse masked inputs.

You can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on documentation…. anything! I’ll be glad to hear your feedback and make the fixes. Hope it helps you!

meioMask 1.1.2 is out! It basically adds some sugar to the 1.1.1 version. See the changelog on this post for more info.

Added 1 new options:

• setSize (default=false): sets the input size based on the length of the mask (work with fixed and reverse masks only).

Everyone that has 1.1.1 working ok is encouraged to change to 1.1.2.

meioMask for jQuery

meioMask for Mootools!

meioMask’s page at jquery.com

meioMask’s Git project page

Features

• Accepts paste event;
• Haves fixed, reverse (currency) and repeat mask types;
• You can still use your hot keys and others (ex: ctrl+t, ctrl+f5, TAB …);
• Supports metadata plugin;
• Works with iPhone;
• Allow default values;
• Haves callbacks for invalid inputs, valid and overflow;
• Haves function to mask strings;
• Support for positive and negative numbers on reverse masks;
• Can auto-focus the next form element when the current input is completely filled.

Changelog

v1.1.2

• Set defaultValue property of the input. This fixes the behavior of the reset button on forms. Now the value will be reseted to the masked value;
• âêô were added to the ‘@’ rule;
• Fix for the auto-tab feature, it now focus just on visible form elements;
• Added setSize option. It sets the input size based on the length of the mask (work with fixed and reverse masks only).

v1.1.1

• Fixed caret bug on ‘repeat’ masks;
• Fixed keyup event on fixed masks, it is now firing propertly;
• Added selectCharsOnFocus option;
• Added textAlign option.

v1.1

• Mask type ‘infinite’ is now called ‘repeat’ (using ‘infinite’ still works but it is deprecated). It now allows a maxLenght value to be set. MaxLength can be set by the maxLength attribute of the element or the maxLength option;
• You can easily set an autoTab option that will focus the next form element when the masked input is totally filled. It is true by default but you can put a jQuery selector string to match the next element you want to be focused.
• Deprecated ‘unmaskVal’ function. This function is too buggy… works for most cases but not all. The best way to unmask a value is by doing it yourself;
• The fixedChars option is not global anymore, giving more flexibility for the masks;
• ‘phone-us’ mask is now ‘(999) 999-9999′;
• Correctly fires the onChange event on reverse masked inputs.

You can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on documentation…. anything! I’ll be glad to hear your feedback and make the fixes. Hope it helps you!

MXHR stands for multiple XmlHttpRequests and was created some days ago by digg.com front end engineers.

This awesome technology lets front end engineers request more than one resource in a single XmlHttpRequest. As an example you will be able, in the future (the project is in alpha release), to get a javascript file, a css and some images with only one request, meaning that you will consume less bandwidth, will get data faster and it will be ordered the way you want. Cool huh?

See more detais on digg’s blog.

I present you meioMask 1.1 – a jQuery plugin for masking inputs.

meioMask for jQuery meioMask for Mootools! meioMask’s page at jquery.com meioMask’s SVN project page meioMask’s SVN

Features

• Accepts paste event;
• Haves fixed, reverse (currency) and repeat mask types;
• You can still use your hot keys and others (ex: ctrl+t, ctrl+f5, TAB …);
• Supports metadata plugin;
• Works with iPhone;
• Allow default values;
• Haves callbacks for invalid inputs, valid and overflow;
• Haves function to mask strings;
• Support for positive and negative numbers on reverse masks;
• Can auto-focus the next form element when the current input is completely filled.

Changelog

v1.1

• Mask type ‘infinite’ is now called ‘repeat’ (using ‘infinite’ still works but it is deprecated). It now allows a maxLenght value to be set. MaxLength can be set by the maxLength attribute of the element or the maxLength option;
• You can easily set an autoTab option that will focus the next form element when the masked input is totally filled. It is true by default but you can put a jQuery selector string to match the next element you want to be focused.
• Deprecated ‘unmaskVal’ function. This function is too buggy… works for most cases but not all. The best way to unmask a value is by doing it yourself;
• The fixedChars option is not global anymore, giving more flexibility for the masks;
• ‘phone-us’ mask is now ‘(999) 999-9999′;
• Correctly fires the onChange event on reverse masked inputs.

v1.0.4

• New mask type ‘infinite’, it allows infinite values at masks. See demos for a better understanding;
• Added new function ‘unmaskVal’ that returns the input value without the mask. See demos for a better understanding;
• Removed a serious bug at IE that was fixing the caret at the end of the input;

v1.0.3

• Callback functions now receive the char number as it second parameter, so it is possible to detect exactly which key has been pressed;
• added the signed masks. It only works with the reverse mask. See demos for more details;
• iPhone support improved. iPhone now works 100% better than the 1.0.2 version. I’ts logic have been changed, and now it’s working with full features.

v1.0.2

• added input callbacks: onInvalid, onValid and onOverflow;
• added support for default values;
• can now be used like $().setMask({});
• added the function $.mask.string(string,mask) that will mask a string (see demos);
• now the value of the input is masked at the time the mask is applyed to it.

v1.0.1

• added support for iphone;
• removed a bug where a fixed char would be replaced by an inputed one.

v1.0

• initial release.

You can see the plugin page here. It contains documentation and examples. Please tell me any bug, new feature, english errors on documentation…. anything! I’ll be glad to hear your feedback and make the fixes. Hope it helps you!

Tags: form, input, iphone, mask, meiomask