Skip to content

keyboard filters to make an HTML input accept only numeric input or filename characters

Notifications You must be signed in to change notification settings

SoftMoonWebWare/input-type_numeric_filename_filepath

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 

Repository files navigation

input-type "numeric" | "filename" | "filepath"

Keyboard/input filters to:

  •make an HTML input accept only numeric input formats; conforms to any numerical base (2-36); only numerical characters for that base are allowed; except for base 10, only one decimal (.) allowed (if the input allows decimal values), and only one negative (-) sign (if the input allows negative values) and only as the first character.  A positive (+) sign may be allowed as the first character if the input allows positive values and the input has an attribute: allow-plus-sign.

Units may also be defined as a post-fix text for the numerical value, using the input attribute: units='unit1, unit2, unit3' where the comma separated list of units are the allowed values; the user needs to only press the first key of the unit. If the Boolean attribute auto-append-unit is present, the first unit listed becomes the default unit which is appended if the end-user does not explicitly choose one.

The min & max attributes accept multiple comma-separated-values, with each value having its own unit, to support the units attribute. The complete rules are:

/* MIN / MAX === VALUE RULES ===

  • if there is no value, there is no limit, as usual.
  • if there is a single value with no unit, that value applies to all input values with units and unitless numbers.
  • if there is a single value with a unit, that value applies only when the input unit matches; otherwise no limit.
  • if there are multiple values separated with commas, they apply when their unit matches the input unit,
  • or if a min/max value has no unit, it applies when the input value has no unit; otherwise, no limit. */

<input type='numeric' min='-5' max='300' step='1.5' allow-plus-sign units='%, px, em, rem' auto-append-unit>

If the value of the input is out of range (according to min/max above), an "out_of_range" event is fired on the input and bubbles.
The Event is an instanceof OutOfRangeEvent (which is an extention of UIEvent), and has the properties .min & .max which are the min/max values with units matching the input value unit. The Input"s value will be set to the correct min/max value, unless your event-handler uses event.preventDefault() on the OutOfRangeEvent

Special case: min='-∞' & max='∞'
While simply leaving min & max blank ALSO allows "infinite" values (limited only by the computer), the user may want to actually signify the value "infinity". They can do that by typing the ~ key when the input-field is blank, and the ∞ symbol will appear instead, when min or max matches ∞. You can not use ∞ with a unit, nor can you include it in a comma-separated-list of min/max values.

<input type='numeric' base='16'>

  •make an input to accept only filename (no directory separators) or filepath characters; but no formatting is enforced.

<input type='filename'>

<input type='filepath'>

Note these are simply textual inputs for users to create filenames, etc. They do not load any files.

About

keyboard filters to make an HTML input accept only numeric input or filename characters

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published