JSFiddle - React, Tailwind, and code Playground
by Tarek Faham
HTML
<input type='text' id='textbox' />
JavaScript
$(window).load(function()
{
var phones = [{ "mask": "(###)###-####"}, { "mask": "(###)###-####x####"}];
$('#textbox').inputmask({
mask: phones,
greedy: false,
definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});
//couldnt load the script externally, so I just copy/pasted it here
$(document).ready(function(){/**
* @license Input Mask plugin for jquery
* http://github.com/RobinHerbots/jquery.inputmask
* Copyright (c) 2010 - 2013 Robin Herbots
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
* Version: 0.0.0
*/
(function ($) {
if ($.fn.inputmask === undefined) {
$.inputmask = {
//options default
defaults: {
placeholder: "_",
optionalmarker: { start: "[", end: "]" },
quantifiermarker: { start: "{", end: "}" },
groupmarker: { start: "(", end: ")" },
escapeChar: "\\",
mask: null,
oncomplete: $.noop, //executes when the mask is complete
onincomplete: $.noop, //executes when the mask is incomplete and focus is lost
oncleared: $.noop, //executes when the mask is cleared
repeat: 0, //repetitions of the mask: * ~ forever, otherwise specify an integer
greedy: true, //true: allocated buffer for the mask and repetitions - false: allocate only if needed
autoUnmask: false, //automatically unmask when retrieving the value with $.fn.val or value if the browser supports __lookupGetter__ or getOwnPropertyDescriptor
clearMaskOnLostFocus: true,
insertMode: true, //insert the input or overwrite the input
clearIncomplete: false, //clear the incomplete input on blur
aliases: {}, //aliases definitions => see jquery.inputmask.extensions.js
onKeyUp: $.noop, //override to implement autocomplete on...