Masked input

Wish to see a specific feature/change in future releases? Feel free to post it here, and if it gets enough "likes", we'd definitely include it in future releases!
Post Reply
grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Masked input

Post by grimblefritz » 2016-05-20 23:29

It would be nice to have support for masked input.

For example:

http://digitalbush.com/projects/masked-input-plugin

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: Masked input

Post by grimblefritz » 2016-08-30 17:08

I have masked input working. And it's pretty simple.

Copy the js script from http://digitalbush.com/projects/masked-input-plugin/

Put the js file in your hooks folder.

Insert this code at the bottom of hooks/footer-extras:

Code: Select all

<script src="hooks/jquery.maskedinput.js" type="text/javascript"></script>
In your hooks/tablename-dv.js, do this:

Code: Select all

$j(function(){

  $j('#phone').mask('(999) 999-9999');
  $j('#cell').mask('(999) 999-9999');
  $j('#fax').mask('(999) 999-9999');

});
Of course, there are different masks and you'll use your own field names.

The maskedinput plugin is not perfect (it doesn't validate date or time entries, etc), but for phone numbers, government ID numbers, credit card numbers, etc, it does pretty good.

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: Masked input

Post by DevGiu » 2016-08-30 17:17

grimblefritz wrote:I have masked input working. And it's pretty simple.

Copy the js script from http://digitalbush.com/projects/masked-input-plugin/

Put the js file in your hooks folder.

Insert this code at the bottom of hooks/footer-extras:

Code: Select all

<script src="hooks/jquery.maskedinput.js" type="text/javascript"></script>
In your hooks/tablename-dv.js, do this:

Code: Select all

$j(function(){

  $j('#phone').mask('(999) 999-9999');
  $j('#cell').mask('(999) 999-9999');
  $j('#fax').mask('(999) 999-9999');

});
Of course, there are different masks and you'll use your own field names.

The maskedinput plugin is not perfect (it doesn't validate date or time entries, etc), but for phone numbers, government ID numbers, credit card numbers, etc, it does pretty good.
Cool, it allows the calendar too?
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: Masked input

Post by grimblefritz » 2016-08-30 18:15

It only does input masking. No data validations. So it doesn't directly solve your calendar problem, but it would be a starting point.

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: Masked input

Post by grimblefritz » 2016-08-30 23:11

Next free bit of time I have, I might experiment with this one:

https://github.com/RobinHerbots/jquery.inputmask

It's more complicated, but it allows data validation. Not only can specify a mask that looks like 99/99/9999 for a date, but you can include validation code to ensure the date is legit and in range.

And other goodies.

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Masked input

Post by peebee » 2016-08-30 23:53

Pretty sweet. I'm going to have a bit of a play around. Thanks.

Asawyer13
Posts: 21
Joined: 2016-08-28 22:40

Re: Masked input

Post by Asawyer13 » 2021-05-22 20:02

grimblefritz wrote:
2016-05-20 23:29
It would be nice to have support for masked input.

For example:

http://digitalbush.com/projects/masked-input-plugin
Link appears to be dead???

Asawyer13
Posts: 21
Joined: 2016-08-28 22:40

Re: Masked input

Post by Asawyer13 » 2021-05-22 20:05

grimblefritz wrote:
2016-08-30 23:11
Next free bit of time I have, I might experiment with this one:

https://github.com/RobinHerbots/jquery.inputmask

It's more complicated, but it allows data validation. Not only can specify a mask that looks like 99/99/9999 for a date, but you can include validation code to ensure the date is legit and in range.

And other goodies.
Has anyone been able to get this to work?? and if so, is there possibly an example project?

Alan

pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: Masked input

Post by pfrumkin » 2021-05-24 20:06

Hi Alan,

I have added this in header-extras.php

Code: Select all

<script src="hooks/jquery.inputmask.js"></script>
and invoked using this in tablename-dv.js

Code: Select all

$j('#Phone').inputmask({"mask": "(999) 999-9999"});
Works fine for phone numbers, that's all I've needed.
Sorry I don't recall from where I downloaded but it doesn't appear to be hard to find.

~Paul

Asawyer13
Posts: 21
Joined: 2016-08-28 22:40

Re: Masked input

Post by Asawyer13 » 2021-05-25 10:37

Paul,
Thanks
I will give that a try.

For me this will help a lot.

Alan

Asawyer13
Posts: 21
Joined: 2016-08-28 22:40

Re: Masked input

Post by Asawyer13 » 2021-05-25 11:02

I got this to work..
Slick

I will work on other options besides Phone, but that's all I needed at this point.

Alan

Post Reply