Top 5 features of JavaScript Input Mask

[{"selector":"#anim-45cf4fff-4c1c-413a-b5a7-c804741035c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d051c69d-911d-405d-bf32-06961c3374fc","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-ad9c3346-69ae-40e8-9999-94fddfeadcde","keyframes":{"transform":["translate3d(-126.53061%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32976dc1-43a3-4176-a05f-fe33b3fd9092","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d5343f89-a20c-4438-8510-cbd947774b80","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-1cec54a4-b12e-4d77-b5e5-a922bf231c04","keyframes":{"transform":["translate3d(-126.53061%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d0d1254d-d731-4013-b2f7-d9bdbd5de668","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4e399e83-58a0-40d4-b89f-be495bac8365","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b125c9be-2122-4d3f-a32d-90dc42433aa5","keyframes":{"transform":["translate3d(-126.53061%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce3142d8-4290-4eef-a387-a4a14b1e392e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-28148f9a-0821-4049-8d08-2a2893ffa506","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-17bfc2f3-3a9c-4558-b2dd-a6f2cb511d81","keyframes":{"transform":["translate3d(-120%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bfe9699c-c421-43d3-9169-8848addb3116","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-84ba0d2f-1fa9-4850-b8c6-4994613f66b2","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-60edcecd-e441-4200-95d9-d4052b672ad1","keyframes":{"transform":["translate3d(-128.01724%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2355fd22-90a0-4d93-a3a4-8b4e82b53ee3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-39f283d9-5bc8-43e4-8408-1b2dd8fcaa60","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Standard mask Developer-friendly APIs Regular expressions Form support and validation HTML5 tel input type support

Standard mask

[{"selector":"#anim-fb340cce-300e-47ee-a385-8467ef552055","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96208aca-f61f-4321-b1e0-f01eecda379c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7a78857-2dde-47c4-88b2-43c3382ff664","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c8c53043-0ff8-4f51-92ba-8ed13c73716b","keyframes":{"transform":["translate3d(-117.36111%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f7985b6f-2482-4b17-bc22-5160aaaf37bd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3bff5ede-b92e-4318-81db-de79a8b3088d","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Use a combination of standard and custom mask elements to validate user input.

Developer-friendly APIs

[{"selector":"#anim-2384c961-69cd-41db-9b3d-612a05302260","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-783385a4-8285-4e56-ad29-f27b867a7f0d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c8f8a38c-96b8-4d59-a4ba-26dd709ba569","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-888fed23-5da3-4f07-b564-d3ae876cca39","keyframes":{"transform":["translate3d(-117.36111%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-35bdc69d-17b5-4b0c-ab89-9eb225249c08","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d7600cc-9225-4404-9a0a-da8f0c6c6238","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Using the client-side APIs, developers can customize all UI elements and control behaviors.

Regular expressions

[{"selector":"#anim-ed329e1f-f26d-4e67-ba7c-c07d41a2f2b0","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53dc330b-5540-4711-b296-7e97f385f05c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7be7d7b-cc39-4fe8-9414-62ab3b8becef","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b0a090e4-f225-42d5-9057-664ec1b8b8dd","keyframes":{"transform":["translate3d(-118.05054%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a3f066b-98de-434a-9d43-629e38a06836","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aa9ea89c-6288-44cc-8bbe-13ae6d84243b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] JavaScript Input Mask elements can be regular expressions, which are useful when defining specific data such as IP addresses.

Form support and validation

[{"selector":"#anim-2d637c1a-54f0-40f6-8079-516b8c3dee30","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b3e587da-5c6b-43da-a9e5-ed03ef636e91","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e3e8d5f2-2157-4fe5-9d55-fba94eab2109","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-3f59ac7f-e42a-425c-89ab-c4507982eb38","keyframes":{"transform":["translate3d(-117.36111%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f210d8c5-902e-40fb-a0d1-bef5811582d6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-844ad0b3-6de5-4684-8f6f-03907597bb67","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The value received from the Input Mask control is sent in raw format. It can then use the Form Validation control to perform custom validations.

HTML5 tel input type support

[{"selector":"#anim-e3d2e08c-3f46-4dd4-9907-819e3af3a13a","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a40b1520-1ff3-4b20-82e5-0d7029453bb0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc13639f-fca3-4f69-ac4c-37982df354db","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-8987800a-5180-4147-b533-ccd26b88d40a","keyframes":{"transform":["translate3d(-117.36111%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d03d2de-ba53-40bc-8607-b31d62f4982e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f0ef9f20-099b-4398-9b16-40b0dd7834c9","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Users can create a masked text box that only accepts HTML5 tel input, restricting input to numbers only.

Syncfusion’s JavaScript Input Mask

[{"selector":"#anim-afa57efb-5c81-4638-8307-53cd8c3e265e","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] Syncfusion’s JavaScript Input Mask is a component that provides an easy and reliable way to collect user input in the format you need. No credit card required.