Jump to content

Masked input plugin


Sherzod

Recommended Posts

Hi! This is a masked input plugin for the jQuery javascript library.

(Hayri Aslan more professionally implemented this feature: http://forums.unigui.com/index.php?/topic/4475-uniexclusive/)

 

Source and usage: http://digitalbush.com/projects/masked-input-plugin/

Demo: http://digitalbush.com/projects/masked-input-plugin/#demo

 

Simple example of use (eg with component UniEdit):

 

1. It is necessary to download the two files and include in your project
   1. jquery
   2. jquery.maskedinput.min.js

 

2.

   1. UniEdit1.Text := '';

   2. UniEdit1 -> ClientEvents -> UniEvents -> add function beforeInit:

function beforeInit(sender)
{   
  Ext.onReady( function () {
    $("#"+sender.id+"-inputEl").mask("99/99/9999");        
  });  
}

post-906-0-55410800-1410805205_thumb.png

 

 

Best regards.

  • Upvote 1
Link to comment
Share on other sites

hi,

i can uniedit mask like this example. it is working.

and i add unidbgrid column editor. but not working.

thanks.

 

Hi

 

Try:

 

UniEdit1 -> ClientEvents -> ExtEvents -> add afterrender function:

function afterrender(sender, eOpts)
{
  $("#"+sender.id+"-inputEl").mask("aa***");
}

function beforeInit(sender)

{   

  Ext.onReady( function () {

    $("#"+sender.id+"-inputEl").mask("99/99/9999");        

  });  

}

 

 

Best regards.

Link to comment
Share on other sites

Hi! This is a masked input plugin for the jQuery javascript library.

(Hayri Aslan more professionally implemented this feature: http://forums.unigui.com/index.php?/topic/4475-uniexclusive/)

 

Source and usage: http://digitalbush.com/projects/masked-input-plugin/

Demo: http://digitalbush.com/projects/masked-input-plugin/#demo

 

Simple example of use (eg with component UniEdit):

 

1. It is necessary to download the two files and include in your project

   1. jquery

   2. jquery.maskedinput.min.js

 

2.

   1. UniEdit1.Text := '';

   2. UniEdit1 -> ClientEvents -> UniEvents -> add function beforeInit:

function beforeInit(sender)
{   
  Ext.onReady( function () {
    $("#"+sender.id+"-inputEl").mask("99/99/9999");        
  });  
}

attachicon.gifUniEditMask.png

 

 

Best regards.

 

great! As you are one of the JS-Gurus in this forum: how to not define the mask in the ClientEvents-properties (because the definitions are a bit hidden there for the developers), but in the Delphi-code, f.e. myform.create? Is this possible? 

Link to comment
Share on other sites

how to not define the mask in the ClientEvents-properties (because the definitions are a bit hidden there for the developers), but in the Delphi-code, f.e. myform.create? Is this possible? 

 

Hi chefdackel.

 

If I understand you correctly, try:

uses ... UniGUIApplication ...

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniSession.AddJS('Ext.onReady ( function () {$("#' + UniEdit1.JSName + '_id-inputEl").mask("aa**");});');
  
  //OR
  
  UniEdit1.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender, eOpts)'+
      ' { $("#"+sender.id+"-inputEl").mask("aa**"); }');
end;

Best regards.

  • Upvote 1
Link to comment
Share on other sites

my field datatype is "date"

thanks

 

I will try...

 

 

Have you tried using UniDateTimePicker1 with mask?

 

UniDateTimePicker1 -> ClientEvents -> ExtEvents -> add afterrender function:

function afterrender(sender, eOpts)
{
  $("#"+sender.id+"-inputEl").mask("99/99/9999");
}
Link to comment
Share on other sites

Hi Delphi Developer, 
 
Thanks for Plugin. 
 
I wrote a very small component inherited from TuniEdit where I added a single Property  "NumberFormat" 
 and copying your code, I implemented AfterRender event. 
 
If leave blank the NumberFormat property, the  component behaves exactly like TuniEdit. 
 
 
 
 
Problems with the component :  
 
The component, just as it is written, only works with the new version of Unigui (0.96,0.97). 
 
For older versions? , Booo. 
 
 
The solution of Delphi Developer, I  believe also works with the old vesion of Unigui . 
 
Tested Only with Delphi XE3
 
post-1298-0-04892800-1410968164_thumb.png
post-1298-0-80817000-1410968172_thumb.png
post-1298-0-14346800-1410968192_thumb.png
 
Best Regards.
 
 
 

 

  • Upvote 2
Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...