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"
data-grouplength="2"
data-grouplength="1,2,3,"
data-grouplength="5,"
data-grouplength="3,"
input[type=number]
placeholder
This message should be before the form element
This message should be after the form element
data-politespace-creditcard
data-politespace-creditcard-maxlength
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"
data-proxy-anchor
input[type=tel]
data-grouplength="3,3," data-delimiter="-"
data-grouplength="3,3,4" data-delimiter="-"
data-grouplength="4,3," data-reverse
data-grouplength="4,3,3" data-reverse
data-politespace-strip="[^\d]*" data-grouplength="4,3,3" data-reverse
data-politespace-us-telephone data-grouplength="3,3,4" data-delimiter="-"