Trending February 2024 # Various Libraries & Types Of Inputmask In Jquery # Suggested March 2024 # Top 5 Popular

You are reading the article Various Libraries & Types Of Inputmask In Jquery updated in February 2024 on the website Eastwest.edu.vn. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested March 2024 Various Libraries & Types Of Inputmask In Jquery

Introduction to JQuery InputMask

An input mask is basically a string of characters that is helpful in indicating the format of valid input values. An input mask is used when it has to be ensured that the format of the input values is consistent. jQuery InputMask is a lightweight JavaScript / jQuery plugin which basically is helpful in creating input masks. An input mask provides input to the user by ensuring a predefined format.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

This predefined format may help in masking dates, numerics, phone numbers, etc. This plugin is easy to use and supports multi-masking, DateTime masking, numeric masking as well as non-greedy masking. InputMask can be used as a Vanilla JavaScript plugin and also can run against jQuery and jqlite. It supports value formatting and validating without input element. This plugin provides the possibility to define aliases to hide complexity. With this plugin, we have the benefit of enabling, disabling and configuring many features using options.

Libraries and Types of InputMask in jQuery Dependency Libraries

dependencyLib (vanilla)

dependencyLib.jquery

dependencyLib.jqlite

Types of Data Masking

Following are the different types of masking types of JQuery.

1. Static Masks

This is the very basic masking where the mask is defined which remains unchanged during the input.

Example:

$(document).ready(function() { $(selector).inputmask("aa-9999"); //static mask $(selector).inputmask({ mask: "aa-9999" }); //static mask }); 2. Optional Masks

We can define some parts in the mask as optional by using [].

Example:

$('#test').inputmask('(99) 9999[9]-9999'); 3. Dynamic Masks

These are those masks that can change during the input and can be defined using {}.

Example:

$(document).ready(function(){ $(selector).inputmask("aa-9{4}");  //static mask with dynamic syntax $(selector).inputmask("aa-9{1,4}");  //dynamic mask }); 4. Alternator Masks

Syntax for the alternator is similar to an OR statement.

5. Preprocessing Masks

Masks can be defined as functions that can allow preprocessing the resulting mask.

Example:

sorting for multiple masks.

retrieving mask definitions dynamically through ajax.

$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }}); 6. JIT Masking

This refers to Just In Time Masking. The mask is visible only for the characters entered by users. Value can be either true or false or a threshold number.

Example:

Inputmask("date", { jitMasking: true }).mask(selector); Examples of JQuery InputMask

Let us now look at some of the examples to understand the concept of input masking and its implementation in a detailed manner.

Example #1

Code:

$(document).ready(function() { $(“#contact”).inputmask({ mask: “(999) 999-9999” }); $(“:input”).inputmask(); }); input { font-family: monospace; } label { display: block; } div { margin: 0 0 1rem 0; color: green; font-weight: bold; } <input id=”cc” type=”text” data-inputmask=”‘mask’: ‘9999 9999 9999 9999′”

Output:

In this example, we have implemented masks for text input fields which accept a Card number, a Date and Contact

In the screenshots, we can see that there is a predefined format available for all the three input fields which helps the user to easily enter fixed-length input.

Example #2

Here is another similar example to understand the implementation of input masking.

Code:

<link rel=”stylesheet” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” <script integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” <script integrity=”sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA=” <script integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ body { padding: 1%; color: black; font-weight: bold; margin-left: 3rem; } div { background-color: lightslategrey; width: 400px; height: 300px; } ZIP Code Contact Number Policy Number $(‘input[name=”postal-code”]’).mask(“S0S 0S0″); $(‘input[name=”contact-number”]’).mask(“(00) 0000 0000″); $(‘input[name=”policy-number”]’).mask(“00-00-0000-0000”);

Output:

In the given example, we are trying to specify certain formats for input fields, ZIP Code, ContactNumber and Policy Number using mask() feature. From the shown below output, we see that a format is defined for each of the three fields.

In the above code:

ZIP Code has the format defined as X1X 1X1.

Contact Number has the format defined as (11) 1111 1111.

Policy Number has the format defined as 11-11-1111-1111.

Example #3

Let us look at another similar example for jQuery input masking.

Code:

input { font-family: monospace; font-weight: bold; } label { display: block; } div { margin: 0 0 1rem 0; } .shell { position: relative; line-height: 1; } .shell span { position: absolute; left: 3px; top: 1px; color: #ccc; pointer-events: none; z-index: -1; } .shell span i { font-style: normal; color: transparent; } input.masked, .shell span { font-size: 14px; font-family: monospace; padding-right: 12px; background-color: transparent; text-transform: uppercase; } <input placeholder=”XXX XXX” pattern=”wdw dwd” data-charset=”_X_ X_X”  type=”text”

Output:

In this example, placeholders are used to show the masks. For all the three fields, formats are defined with certain patterns.

Conclusion

Input masking is a way of restricting data entered by the users into form fields by enforcing a predefined format. For this purpose, we can use jQuery input mask plugin which is very lightweight and is easy to implement. This plugin helps in fetching the data from the server without any mess and after the user receives it, the data is automatically masked by the plugin while entering into form fields. Input masking is helpful while dealing with data like cards, phone numbers, zip codes, dates and more.

Recommended Articles

This is a guide to JQuery InputMask. Here we discuss various libraries and types of InputMask in JQuery along with different examples and code implementation. You may also have a look at the following articles to learn more –

jQuery Validate

You're reading Various Libraries & Types Of Inputmask In Jquery

What Do Various Terms Mean On Snapchat

Snapchat has developed its own language of sorts. It has friend emojis, chat notification, not to mention user lingo! If you too feel overwhelmed with this trove of information, we got your covered. In this article, we will cover everything you need to know about Snapchat jargon (terms, emojis, icons, etc.) to set you on your way to ace the app.

Friend emojis

Snapchat assigns different emojis depending on your interaction with specific users. These emojis appear next to the contacts name. A recent update now lets you customize these emojis to your heart’s content! However, in this article, we will explain what the default friend emojis mean.

Snapstreak ?

If you see a flame emoji appear next to a user’s name, this means that you have started a ‘Snapstreak’ with the user. A similar emoji will appear next to your name in the user’s contacts. To begin a Snapstreak with a user, both you and the other person must snap each other for three days consecutively.

Snapstreaks do not count messages; so it has to be snaps. The number that appears next to the flame emoji corresponds to the number of days you and your friend have consecutively sent snaps to each other.

Note: If you miss a single day, the Snapstreak will reset to zero.

Related: How to never lose your Streak in Snapchat with these tips (Snapstreaks)

Hourglass ⌛

The hourglass emoji appears if your Snapstreak is about to expire. A Snapstreak will expire if two users do not send each other a snap within 24 hours. If you see this emoji next to your friend’s name, quickly send them a snap. When the snap is delivered, the hourglass emoji will disappear.

Mutual BF’s ?

Characterized by the emoji with sunglasses, this appears next to a user’s name if both you and the user, have a best friend in common. The emoji will also appear next to your name on the user’s account.

Mutual Besties ?

This awkward emoji perfectly represents the situation you are in. Mutual Besties indicates that both you and the other user have the best #1 best friend. This means that both you and the user have been sending snaps to the same person.

BFs ?

This smiling emoji indicates that the user is one of your best friends. Snapchat uses a simple algorithm to determine who you communicate with the most (only snaps). ‘BFs’ doesn’t mean that the person is your #1 best friend, but they are sure someone who you communicate with a lot.

The emoji does not necessarily appear next to your name on the other user’s account.

Besties ?

This yellow heart emoji is a nice thing to notice next to one of your contacts names. It means that both you and the user are each other’s #1 best friends. You send the most snaps to this user, and vice versa.

This emoji appears beside your name on your friend’s account too.

BFF ❤️

If you have continued to send each other snaps for two weeks in a row, your yellow heart emoji will be upped to a red heart. This indicates that you have been each other’s #1 Best friend for two weeks.

This emoji appears beside your name on your friend’s account too.

Super BFF ?

This is the highest honor of Snapchat friends. ‘Super BFF’ appears when you have been each other #1 best friend for 2 months straight! You deserve the double hearts because that takes dedication.

This emoji will appear beside your name on your friend’s account too.

Snapchat Lingo and Terms

If you’re having a hard time keeping track of all the new Snapchat lingo, this guide is for you. The acronyms are not limited to use on Snapchat only, and pop up quite frequently on other platforms like Instagram, Facebook, etc.

WCW

Women Crush Wednesday: This acronym is generally used as a hashtag accompanying an image of a woman that the user admires. It could be a friend, a celebrity, a sportswoman, etc. As the name suggests, WCW is usually used on a Wednesday.

SFS

Shoutout For Shoutout: Originating on Snapchat itself, SFS is used to tell another user that you would like to be mentioned in their snap, as well as mention them back in your own snap. This is usually used for promotions so that you can increase your visibility.

SS

Screen Shot: This common acronym is now freely used on most platforms. However, because of Snapchats distinguished feature of disappearing snaps, SS is used to request a screenshot of a picture that you cannot view.

SB

Snap Back: A snap back is when a user replies to your snap with another snap. The interaction by snaps is called a snap back. SB can also be used to request another user to send you a snap (especially if you believe your Snapstreak is about to break).

wtv

Whatever: Used quite freely while texting, ‘wtv’ is an abbreviation indicating that the user does not care about the matter. For example, ‘Do you want to go to the park?’ ‘Yeah, wtv’.

BLM

Black Lives Matter: A strong and powerful hashtag currently trending on most social outlets, BLM shows support for people of color and takes a stand against unjust offenses against the same.

iykyk

If you know, you know: This abbreviation is used to stir up mystery as well as remind others who were with you. It basically means if you were there with me, you know what I’m talking about. It can also be used to check if people are on the same page as you.

FTC

Favorite, Thumbs up, Comment: While generally used on video streaming sites like YouTube, FTC has come to mean ‘subscribe’. When used out of context, it can mean, ‘stay tuned for more such content.’

DWU

Don’t wait up: DWU is used to tell another person not to worry about you. It can also be used more literally to tell a person not to wait up for you to return, as it could be late.

idm

I don’t mind: This one is quite straight forward. It is used to indicate that the person is ok with whatever the other person is conveying.

idek

I don’t even know: This acronym is used to express confusion on the user’s part. For example, ‘Do you think we’ll be going camping with this weather?’ ‘Honestly, idek!’

BBG

Better be going: If you have trouble ending a conversation, BBG can come to your rescue. You can use BBG when you want to politely let the other person know that you are ending the conversation.

nvm

Nevermind: Quite self-explanatory, this one. It can also be used to express disappointment. For example, ‘I thought the Mayor was going to turn the town around….#nvm’.

RDH

Rate/Date/Hate: RDH is used to get an honest opinion of a third party. Usually accompanied by a picture of the person in question, RDH is used to understand what other people think of that person. For example, ‘Sending you a pic. What do you think? RDH?’

FW

F*ck with: This acronym has gained a lot of popularity recently. While it sounds aggressive, most of the time, it is used to indicate a close liking for something. For example, ‘Deadmaus is dope. I’d FW that for sure.’

fytb

F*ck you talking bout: This is used to indicate disdain or sometimes surprise about what another person is saying. It is a shortened form of the sentence ‘what the f*ck are you talking about!’ If used more literally, it can also indicate that you actually do not know what the other person is talking about. For example, ‘What smoke? I just got home, fytb?’

lmao

Laughing my a*s off: This old-but-gold acronym is still used today to express laughing at a humorous situation. You may have encountered the same acronym being used with repeating letters (lmaaao/lmaooo). All of these mean the same thing.

js

Just saying: Js is generally used to soften a harsh sentence. It is added at the end of a sentence to portray that the user is just being honest. For example, ‘I don’t think that color suits you, js.’

ts

Tough sh*t: This acronym can be used to show pity or understanding of another person’s problems. It can be compared to the term ‘that sucks!’

imy

I miss you: Imy can be used both, in sentences, as well as with a hashtag. It expresses that the user misses the person that they are texting. When used as a hashtag accompanying a picture, it may refer to the person in the picture.

GC

Group Chat: GC just means group chat. It refers to a chat with more than two people in it. It can be referring to different platforms like WhatsApp, texting, etc.

Snapchat Notifications

Snapchat has its own indicators to let a user know what’s going on in their account. Use this guide below to better understand what different indicators mean.

Grey arrow / pending

The grey arrow appears when you send a snap to a person, and it hasn’t gone through yet. If you have a fast internet connection, you may not even see the grey arrow, as the snap will be sent immediately. However, if you have slower/bad internet, the grey arrow will remain, until the snap has successfully gone through.

It could also mean that the person you are sending the snap to has not added you as a friend yet, or has unfriended you.

Red square / full arrow / empty arrow

The red arrow appears when you have sent a snap (picture/video) without audio to another user. This indicates that the snap has been successfully sent. The red square appears when you receive a snap (picture/video) that does not contain audio. This helps the user know if they need to mute their speakers or not.

The red empty arrow indicates that the snap has been viewed by the person.

Purple square / full arrow / empty arrow

Similarly, when you send a video with audio you receive a purple arrow when it goes through. The purple square appears when you receive a snap that contains audio. This helps the user know if they need to mute their speakers or not.

The empty purple arrow indicates that the snap has been viewed by the person.

Blue square / full arrow / empty arrow

Blue indicates text (not video or picture). A blue arrow appears when you send a text message to a user. The blue square appears when you receive a text message from a person.

When the user opens the message to read it, the arrow will turn empty.

Save Your Files To Various Cloud Services With Ballloon

Thanks to cloud storage you can now save your files in the cloud and have access to them from any device. With so many services to choose from, it’s not unusual to see that many decide to have an account on more than one service.

It can be very annoying for many having to save an image to their computer and then upload it to the cloud. Wouldn’t it be great to have a tool that would allow you to upload your files to any of the cloud storage services? But not just be able to choose from one service but various services? With Ballloon, it’s possible. You can either use its Chrome extension or web app.

Save Your Files to Various Cloud Storage Services

You can connect accounts from services such as DropBox, SkyDrive, Box, Copy and SugarSync. Ballloon will ask you for permission to access your account so you can quickly add your files to the cloud service of your choice. In the third circle you can see all the ballloons you have sent just in case you weren’t sure you sent your friend that important file.

How to Only See the Icons of the Cloud Services You Use

As you can see, Ballloon is a very useful tool that makes the task of storing content a lot easier, and this is a tool that I will continue using for a very long time.

Conclusion

Judy Sanhz

Judy Sanhz is a tech addict that always needs to have a device in her hands. She loves reading about Android, Softwares, Web Apps and anything tech chúng tôi hopes to take over the world one day by simply using her Android smartphone!

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Sign up for all newsletters.

By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time.

Horizon Forbidden West Patch 1.09 Brings Various Bug Fixes

Horizon Forbidden West Patch 1.09 brings various bug fixes [Patch Notes]

3

Share

X

Gorilla Games is working tirelessly at fixing all the Forbidden West bugs.

Patch 1.09 is super packed with both visual and gameplay improvements.

Even the

 Black Box Collectibles activity rewards got fixed with this update.

Furthermore, developers a

dded stability and performance improvements.

X

INSTALL BY CLICKING THE DOWNLOAD FILE

Try Outbyte Driver Updater to resolve driver issues entirely:

This software will simplify the process by both searching and updating your drivers to prevent various malfunctions and enhance your PC stability. Check all your drivers now in 3 easy steps:

Download Outbyte Driver Updater.

Launch it on your PC to find all the problematic drivers.

OutByte Driver Updater has been downloaded by

0

readers this month.

The creators of Horizon Forbidden West, Guerrilla Games, have released update 1.09 (1.009) details for PS4 and PS5 players.

The upcoming Horizon Forbidden West 1.09 patch notes speak about various bug fixes, tweaks, and gameplay adjustments.

Furthermore, the Horizon Forbidden West update 1.09 (1.009.000) will also include performance and stability improvements.

What’s new in Horizon Forbidden West?

Unfortunately, players are still facing a number of issues with the game, which Horizon Forbidden West version 1.09 will address.

Basically, this is what we’re looking at with this latest game patch, as developers informed all players and people that bought the title:

Addressed various graphical issues regarding shimmering and sharpening.

Addressed issues related to screen saturation.

Fixed multiple issues where the player fast travels to any campfire while gliding inside of a tornado.

Fixed an issue where receiving the reward after completing the Black Box Collectibles activity.

Added stability and performance improvements.

The most important tweaks here are definitely the graphics ones. Players have been constantly reporting visual fidelity bugs since launch day.

Even more good news is that the campfire bug has finally met its match and will no longer bother us while enjoying our new favorite title.

KNOWN ISSUES

We are currently looking into several issues reported by the community. Please note that these issues are not yet fixed in this patch, but our teams are investigating them with high priority.

The team are continuing to investigate and tweak the reported graphical issues regarding shimmering, sharpening and screen saturation.

Some players have reported multiple issues with various types of traversal after the player fast travels to any campfire while gliding inside of a tornado.

Some players have reported an issue with receiving the reward after completing the Black Box Collectibles activity.

Expert tip:

Main Quests

Fixed an issue in main quest ‘To The Brink’ where using Silent Strike on a quest-specific Bristleback would teleport the player to Chainscrape.

Fixed an issue in main quest ‘The Dying Lands’ where Varl and Zo would sometimes idle outside of Plainsong and block progression.

Fixed an issue in main quest ‘The Dying Lands’ where Aloy’s companions would not lead the way after restarting from a specific save.

Fixed an issue in main quest ‘The Broken Sky’ where reloading a certain save could sometimes disable fast travel unintentionally.

Fixed an issue in main quest ‘Cradle of Echoes’ where loading a save created on the previous patch would cause Aloy to be stuck in the Base.

Fixed an issue in main quest ‘Thebes’ where Aloy’s breathing sounds were playing during a cinematic sequence.

Fixed an issue in main quest ‘All That Remains’ where restarting from a certain save would cause Aloy to spawn in the Base and unable to leave.

Side Quests

Fixed an issue in side quest ‘The Bristlebacks’ where Ulvund didn’t get the memo and stuck around in Chainscrape after the quest was completed.

Fixed an issue in side quest ‘What Was Lost’ where Kotallo would sometimes become unresponsive when reloading from a specific save.

Fixed an issue in side quest ‘Blood For Blood’ where Kavvoh and Arokkeh could not be interacted with in specific circumstances, blocking progression.

Fixed an issue in side quest ‘Forbidden Legacy’ where fast traveling during the Slitherfang encounter would cause the machine to not respawn, thus blocking progression.

Fixed an issue in side quest ‘The Roots that Bind’ where the quest objective “Go to the Drumroot” would not complete after damaging the Widemaws from a large distance.

Fixed an issue in errand quest ‘Call And Response’ where killing the enemies before receiving the objective to do so could block progression.

World Activities

Fixed an issue in Gauntlet Run, where passing the finish line in last place would result in a win in specific circumstances.

Fixed several issues with specific Firegleam and Metal Flower icons not being displayed on the map.

Fixed an issue where Firegleam icons would not be correctly removed from the map once the related activity was completed.

Fixed an issue where fast travel would be disabled in specific circumstances when loading a save made while playing Machine Strike.

UI/UX

Graphics

Fixed an issue where Aloy wouldn’t appear wet anymore after being in water.

Multiple graphics fixes and improvements in cinematics.

Multiple visual improvements in shadows and clouds.

Fixed an issue where Photo Mode controls would be frozen when initiating Photo Mode during a swan dive.

Performance and Stability

Multiple crash fixes.

Multiple performance and streaming improvements in cinematics.

Removed multiple unintentional loading screens and black screens.

Fixed multiple instances of streaming and visual popping.

Other

Made several improvements to the NPCs’ movement and animations in settlements.

Made it easier to tag individual components when using motion aiming and scanning machines.

When picking up potions or tools that don’t fit in your toolbelt anymore they are now moved to the stash.

Several balancing changes to weapons and enemies.

Fixed several instances where Aloy could get stuck in geometry.

Fixed an issue where the ‘All Machine Types Scanned’ trophy could be easily missed during the final main quest ‘Singularity’.

Fix for the mount call sometimes causing the flying mount to be spawned in undesirable positions and in rare cases be unreachable.

Several datapoints that are located in areas that the player could not return to are now automatically unlocked upon the player leaving that space.

Fixed multiple instances of specific music tracks getting stuck and repeating.

No, there are no changes, improvements, or tweaks of any kind coming to the PC version, as the game is still a PlayStation exclusive.

Still experiencing troubles? Fix them with this tool:

SPONSORED

Some driver-related issues can be solved faster by using a tailored driver solution. If you’re still having problems with your drivers, simply install OutByte Driver Updater and get it up and running immediately. Thus, let it update all drivers and fix other PC issues in no time!

Was this page helpful?

x

Start a conversation

How To Easily Create Profile Pictures For Various Social Networks

Every social network has different guidelines to create profile pictures, headers and other pictures. Not everyone who uses social media has the skill or patience to create the right pictures for each network. Often, they will just let the network crop and distort the picture to get it upload. This can lead to horrible pictures representing you online.

That’s where AP Social Media Image Maker comes in handy. It helps you create the best profile pictures, cover images and other social networking pictures. It will save you time and make the process easier.

Variety & styles

Social Media Image Maker allows you to create pics for more than ten social networks, services and web apps.

It also allows users to pick a network or service, then create a variety of pictures for it.

Everything from profile pics to cover photos to background images can be created. Depending on the service, AP Social Media Image Maker provides you with a web app to create all the images you would need for a service from one place. It even supports new formats recently introduced by networks and services which are updated. AP Social Media Image Maker adds new services and picture types frequently in addition to ensuring new formats are up to date.

Tools available

After you pick a service and image type you need to create, you are given two steps to crop and edit your picture before it is ready.

This is our original image:

The first set of tools allows you to crop, rotate and flip the image. You are required to start with an original image that is at the minimum dimensions for that particular image type.

This allows you to get the sizing right on the photo.

You are also given a variety of photo filters to apply to your image.  You can use Sepia filters to off black and white filters to even retro looking ones.

You can only choose one, but the photo filters can be powerful to apply to a photo depending on the colors it originally uses. This can take some time per photo to find the right look but can make all the difference in how it stands out once it is displayed on the network or service of your choice.

You are also given a handful of effects you can add to your pictures.  These effects can do everything from sharpen the image to blur it to making it black and white.  Depending on the type of filter you used, it could take a few tries to get the right effect to really bring out the best in your image.

This is our finished image:

Downloading and sharing

When you are finished editing your photo, you can download it in PNG or JPEG format to your computer.  You can also rename the image before you download it to your computer.

Saving these pictures in PNG format makes them lossless, so if you choose to edit them further after downloading, you can do so without losing the original quality.

During the download process, you can even share what you have created on Facebook, Twitter and Google+ before uploading it and setting it as your picture of choice.

Conclusion

AP Social Media Image Maker is an amazing tool for those like me who do not have the time to edit every single picture I want to use on the networks and services I utilize every day. This web app makes it create profile pictures with the use of easy cropping, editing, and add colorization tools to make them attractive online. How do you edit the pictures you use to represent you online?

Melissa Popp

Melissa Popp has been a freelance writer for over a decade. While she primarily has focused on writing about technology, she’s also written about everything from custom mailboxes to health care to just about anything in between. Melissa is the Content Strategist for chúng tôi the nation’s leading marketplace for trailers for sale, the Social Media Manager for the best roofing Denver company as well as a Writer here at MakeTechEasier. She’s a proud support of the Denver SEO community and a big fan of online radio.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Sign up for all newsletters.

By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time.

Various Libraries & Types Of Inputmask In Jquery

Introduction to JQuery InputMask

An input mask is basically a string of characters that is helpful in indicating the format of valid input values. An input mask is used when it has to be ensured that the format of the input values is consistent. jQuery InputMask is a lightweight JavaScript / jQuery plugin which basically is helpful in creating input masks. An input mask provides input to the user by ensuring a predefined format.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

This predefined format may help in masking dates, numerics, phone numbers, etc. This plugin is easy to use and supports multi-masking, DateTime masking, numeric masking as well as non-greedy masking. InputMask can be used as a Vanilla JavaScript plugin and also can run against jQuery and jqlite. It supports value formatting and validating without input element. This plugin provides the possibility to define aliases to hide complexity. With this plugin, we have the benefit of enabling, disabling and configuring many features using options.

Libraries and Types of InputMask in jQuery Dependency Libraries

dependencyLib (vanilla)

dependencyLib.jquery

dependencyLib.jqlite

Types of Data Masking

Following are the different types of masking types of JQuery.

1. Static Masks

This is the very basic masking where the mask is defined which remains unchanged during the input.

Example:

$(document).ready(function() { $(selector).inputmask("aa-9999"); //static mask $(selector).inputmask({ mask: "aa-9999" }); //static mask }); 2. Optional Masks

We can define some parts in the mask as optional by using [].

Example:

$('#test').inputmask('(99) 9999[9]-9999'); 3. Dynamic Masks

These are those masks that can change during the input and can be defined using {}.

Example:

$(document).ready(function(){ $(selector).inputmask("aa-9{4}");  //static mask with dynamic syntax $(selector).inputmask("aa-9{1,4}");  //dynamic mask }); 4. Alternator Masks

Syntax for the alternator is similar to an OR statement.

5. Preprocessing Masks

Masks can be defined as functions that can allow preprocessing the resulting mask.

Example:

sorting for multiple masks.

retrieving mask definitions dynamically through ajax.

$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }}); 6. JIT Masking

This refers to Just In Time Masking. The mask is visible only for the characters entered by users. Value can be either true or false or a threshold number.

Example:

Inputmask("date", { jitMasking: true }).mask(selector); Examples of JQuery InputMask

Let us now look at some of the examples to understand the concept of input masking and its implementation in a detailed manner.

Example #1

Code:

$(document).ready(function() { $(“#contact”).inputmask({ mask: “(999) 999-9999” }); $(“:input”).inputmask(); }); input { font-family: monospace; } label { display: block; } div { margin: 0 0 1rem 0; color: green; font-weight: bold; } <input id=”cc” type=”text” data-inputmask=”‘mask’: ‘9999 9999 9999 9999′”

Output:

In this example, we have implemented masks for text input fields which accept a Card number, a Date and Contact

In the screenshots, we can see that there is a predefined format available for all the three input fields which helps the user to easily enter fixed-length input.

Example #2

Here is another similar example to understand the implementation of input masking.

Code:

<link rel=”stylesheet” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” <script integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” <script integrity=”sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA=” <script integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ body { padding: 1%; color: black; font-weight: bold; margin-left: 3rem; } div { background-color: lightslategrey; width: 400px; height: 300px; } ZIP Code Contact Number Policy Number $(‘input[name=”postal-code”]’).mask(“S0S 0S0″); $(‘input[name=”contact-number”]’).mask(“(00) 0000 0000″); $(‘input[name=”policy-number”]’).mask(“00-00-0000-0000”);

Output:

In the given example, we are trying to specify certain formats for input fields, ZIP Code, ContactNumber and Policy Number using mask() feature. From the shown below output, we see that a format is defined for each of the three fields.

In the above code:

ZIP Code has the format defined as X1X 1X1.

Contact Number has the format defined as (11) 1111 1111.

Policy Number has the format defined as 11-11-1111-1111.

Example #3

Let us look at another similar example for jQuery input masking.

Code:

input { font-family: monospace; font-weight: bold; } label { display: block; } div { margin: 0 0 1rem 0; } .shell { position: relative; line-height: 1; } .shell span { position: absolute; left: 3px; top: 1px; color: #ccc; pointer-events: none; z-index: -1; } .shell span i { font-style: normal; color: transparent; } input.masked, .shell span { font-size: 14px; font-family: monospace; padding-right: 12px; background-color: transparent; text-transform: uppercase; } <input placeholder=”XXX XXX” pattern=”wdw dwd” data-charset=”_X_ X_X”  type=”text”

Output:

In this example, placeholders are used to show the masks. For all the three fields, formats are defined with certain patterns.

Conclusion

Input masking is a way of restricting data entered by the users into form fields by enforcing a predefined format. For this purpose, we can use jQuery input mask plugin which is very lightweight and is easy to implement. This plugin helps in fetching the data from the server without any mess and after the user receives it, the data is automatically masked by the plugin while entering into form fields. Input masking is helpful while dealing with data like cards, phone numbers, zip codes, dates and more.

Recommended Articles

This is a guide to JQuery InputMask. Here we discuss various libraries and types of InputMask in JQuery along with different examples and code implementation. You may also have a look at the following articles to learn more –

jQuery Validate

Update the detailed information about Various Libraries & Types Of Inputmask In Jquery on the Eastwest.edu.vn website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!