This is a demo of the Politespace plugin, an accessible alternative to input mask plugins that adds whitespace formatting when you blur away from an input and removes the spaces on focus so as to not interfere with editing. Learn more about politespace on GitHub.
input[type=text]
pattern="[0-9]*"
maxlength="7"
input[type=number]
data-grouplength="2"
data-grouplength="1,2,3,"
input[type=tel]
data-grouplength="3,3," data-delimiter="-"
data-grouplength="3,3,4" data-delimiter="-"
data-grouplength="4"
data-grouplength="5,"
data-grouplength="3,"
input[type=number] is now supported in spite of the bugs when setting a value containing whitespace characters in Chrome, Safari, Mobile Safari (last tested in 34, 6, and iOS 7 respectively).
input[type=number] is important because it triggers the numeric keyboard on the Android browser and mobile Firefox.
data-grouplength="5," data-delimiter="-"
data-grouplength="3" data-delimiter="," data-reverse
data-grouplength="4,3," data-reverse
data-grouplength="4,3,3" data-reverse