jump to navigation

Maskedit Input helper (updated) March 27, 2006

Posted by rossoft in CakePHP.
trackback

Creates a maskedit inputbox. Compatible with Firefox, IE

Usage from view:
$maskedit->maskedit(‘Customer/somefield’,’nnnn-aa-nn’,array(‘size’=>30));

1. Put this on app/views/helpers/maskedit.php

/**
 * Creates a masked input box
 * @author RosSoft
 * @license MIT
 * @version 0.1
 */
class MaskeditHelper extends Helper
{
    var $helpers=array(‘Html’,’Javascript’,’Head’);
   
    /*
     * Creates a masked input box
     * @param string $fieldname input box fieldname (model/field)
     * @param string $mask The input Mask
     * @param array $htmlAttributes Extra html attributes for input tag
     * @return string
     */
    function maskedit($fieldname,$mask,$htmlAttributes)
    {
        $this->Head->register_js(‘maskedit/maskedit’);
       
        if (!isset($htmlAttributes[‘id’]))
        {
            $htmlAttributes[‘id’]=”maskedit_” . str_replace(‘/’,’_’,$fieldname);
        }
        $htmlAttributes[‘onclick’]=”javascript:RS_InputMask_OnClick(event, this);”;
        $htmlAttributes[‘onkeypress’]=”javascript:RS_InputMask_KeyPress(event, this);”;
        $htmlAttributes[‘onkeydown’]=”javascript:RS_InputMask_KeyDown(event, this);”;
        $htmlAttributes[‘oninput’]=”javascript:RS_InputMask_OnInput(event, this);”;
        $htmlAttributes[‘onfocus’]=”javascript:RS_InputMask_GotFocus(this);”;
        $htmlAttributes[‘onpaste’]=”javascript:RS_InputMask_OnPaste(this);”;       
               
        ob_start();                       
        echo $this->Html->input($fieldname, $htmlAttributes,true);
        echo $this->Javascript->codeBlock(“maskeditInit(‘{$htmlAttributes[‘id’]}’,’$mask’)”);
        return ob_get_clean();
    }
}
/**
 * Mask examples:
 * nnnn-nn-nn   Date
 * aaaa-nn      4 letters, then two numbers
 * xxxx-nn      4 alphanumeric, then two numbers
 * Other simbols than n and a are literals (maybe exists more special chars)
 */
?>
2. Put this  on app/webroot/js/maskedit/maskedit.js (attention: unknown source code, unknown license, unknown source url)
3. Include the helper maskedit in your controller

var $helpers=array(‘xxxx’,’maskedit’);

4. Copy this helper and rename to HeadHelper to file: app/webroot/helpers/head.php

Advertisements

Comments»

1. Naonak - March 27, 2006

To work, we must rename myhtml helper to “head” and rename maskedit function to “mask”. It’s right ?

2. rossoft - March 27, 2006

Yes…lots of typos here

in your view $maskedit->maskedit(’Customer/somefield’,’nnnn-aa-nn’,array(’size’=30));

Then rename the myhtml helper to HeadHelper

Thanks for the feedback

3. Naonak - March 27, 2006

Ok, I test it. Work good and moreover useful !
Thanks Rossoft !

It will be good if HeadHelper can register metatags like keyword.
Ability to specify media atribute for css link will be great too.

4. rossoft - March 27, 2006

Naonak: good ideas, I will include them in next version 🙂

5. Naonak - March 27, 2006

Note : MaskeEdit javascript is not compatible with Internet Explorer.

6. rossoft - March 27, 2006

Naonak: will be compatible…I have to fix some of my js to attach events to tags

7. rossoft - March 27, 2006

now it works for IE too, you must download the js (clear your cache) and the maskedit helper.

8. rossoft - March 28, 2006

Replace 4. Copy this helper and rename to HeadHelper to file: app/webroot/helpers/head.php

By

Copy the helper from the post “Register head tags from helpers (2)” to app/webroot/helpers/head.php

9. Nao - April 2, 2006

Great! I will use it in production.

I test it but despite everything there remains difference between FF and IE :

If you don’t fill maskedit and submit, FF return empty string (great) but in a same case IE return something like ____-__-__ for example.

It because on FF maskedit is init with empty value on load of the page and when you “quit” input with no data enter.

10. rossoft - April 3, 2006

Fixed the js file 🙂

11. Skeptical - March 15, 2007

gabage

12. zizo - July 30, 2007

emerald rings and gold rings http://www.emeraldring.fora.pl

13. chuckyarg - September 7, 2007

Take a look to this input mask
http://www.jazz-solutions.com.ar/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: