Web Component: j-Input

j-Input

j-Input is multifuncional input component which supports a lot of features and it's optimized for everyday usage. It's a great alternative to j-Textbox and j-Dropdown. Works only with jComponent +v17.

• jComponent v19|v20

Configuration:

• type {String} optional, values:
  • empty value means default text
  • email,
  • multiline
  • checkbox
  • phone
  • password
  • zip
  • date (needs datepicker component)
  • NEW: datetime (needs datepicker component)
  • time (needs timepicker component)
  • color (needs colorpicker component)
  • icon (needs faicons component)
  • emoji (needs emoji component)
  • url
  • number
  • number2 (nullable)
  • search
  • lower
  • upper
  • slug
  • id
  • NEW: radiobutton
  • NEW: tags
  • NEW: tags-lower
  • NEW: tags-upper
  • NEW: tags-id
  • NEW: tags-email
  • NEW: tags-slug
  • NEW: tags-phone
  • NEW: tags-url
• required {Boolean} optional, enables "required" (default: false)
• icon {String} optional, icon for label e.g. home, cog, etc.
• licon {String} optional, left icon e.g. home, cog, etc.
• liconclick {String} optional, a path to method function(component, input)
• ricon {String} optional, right icon e.g. home, cog, etc.
• riconclick {String} optional, a path to method function(component, input)
• label {String} optional, a label (default is HTML content)
• autofocus {Boolean} optional, focuses the input (default: false)
• align {String} optional, left (default), 2 / right or 1 / center
• after {String} optional, it means a char after label (default: :)
• autofill {Boolean/String} optional, enables browser's autofill feature (string will be used as an input name, default: false)
• placeholder {String} optional, adds a placeholder text into the input
• maxlength {Number} optional, sets a maximum length of chars (default: 200)
• minlength {Number} optional, sets a minimum length of chars
• minvalue {Number} optional, a minimal value for number type
• maxvalue {Number} optional, a maximal value for number type
• increment {Number} optional, sets a value for incrementing (default: 1)
• validate {String} optional, a condition for validating of value, can contain a link to function(value) or !!value.match(/[a-z]+/)
• format {String} optional, output formatting e.g. for date type: yyyy-MM-dd, for time type: HH:mm, for number you can define max. decimals (Default: auto)
• disabled {Boolean} optional, disables this component
• error {String} optional, adds a string text under the component
• autocomplete {String} optional, needs to contain a link to a function, is triggered on focus event
• spaces {Boolean} optional, enables spaces otherwise it removes them (default: true)
• innerlabel {Boolean} optional, enables inner label (default: true)
• dirsource {String} optional, path to a data-source or NEW to function(search, next) (path must contain / or NEW: id|name,id|name
• dircustom {String/Boolean} optional, can contain a path to function(val, next(new_val)) or can be Boolean. This option can enable adding a custom value (value not defined in data-source)
• dirrender {String} optional, a path to function(item, text) (must return HTML for j-Directory), this function can affect list of items in j-Directory
• dirminwidth {Number} optional, a minimum width for j-Directory, default: 200
• dirmaxwidth {Number} optional, a maximum width for j-Directory
• diroffsety {Number} optional, Y offset (default: 0)
• diroffsetx {Number} optional, X offset (default: 0)
• dirplaceholder {String} optional, a placeholder for j-Directory
• dirempty {String} optional, adds an empty field for j-Directory
• dirkey {String} optional, a key name for reading of text in dirsource (default: name)
• dirvalue {String} optional, a key name for reading of value in dirsource (default: id)
• direxclude {Boolean} optional, excludes a current value from j-Directory (default: true)
• dirsearch {Boolean|String} optional, can disable search in j-Directory (default: true) or {String} (key name) can map a value for searching
• dirraw {Boolean} optional, can disable escaping of items for j-Directory (default: false)
• dirdetail {String} optional, a link to the function function(val, next(NEW_TEXT)) (targeted for to dirsource)
• dirfilter {String} optional, an inline filter conditional method, for example: value.id !== 2 (targeted for to dirsource)
• mask {String} optional, can contain a mask in the form ###/## (# is replaced for a char)
• maskregexp {String} optional, can contain RegExp for each char in the form \d,\d,\d,null,\d,\d (, is delimiter)
• masktidy {Boolean} optional, the component returns only raw chars without fixed chars (default: false)
• autosource {String} a path to the search source Array (NEW) or function(search, render(arr)) for dynamic searching
• autovalue {String} a property path for the value in autosource, default: name
• autoexec {String} a path method function(item, next(value_to_input))
• searchalign {Number} can align icon on type:search to left (2) or right (1, default)
• forcevalidation {Boolean} enables for force validation for phone and email (default: true)
• camouflage {Boolean|String} masks the value in the input after is triggered blur event (default: false) or it can be String which will be used as a camouflage
• monospace {Boolean} enables monospaced font (default: false)
• multiple {Boolean} enables checkboxes if dirsource is not empty
• tabindex {Number} adds a tabindex (default: 0)
• tabs {Boolean} enables tabs for multiline (default: true)
• readonly {Boolean} block text field edition (default: false)
• transform {String} a link to the function(value, config) for transforming of entered values
• multiline {Boolean} works only with radiobutton type
• NEW: separator {String|Boolean} a separator for multiple rendered values
• NEW: realtime {Boolean} enables real-time binding (default: true)
• NEW: exec {String} a link to the function(value, element) which will be evaluated if the input is affected

Interesting:

• type:date needs datepicker component
• type:time needs timepicker component
• dirsource:path.to.datasource needs directory component
• if licon or ricon starts with ! then the component render a raw value instead of icon
• ui-input-ok class is binded when the input is validated and filled
• SET('path', 'camouflage', 'show'); shows the value for 2000 ms

https://www.youtube.com/watch?v=Ne3ezaP0w34

Author

• Peter Širka petersirka@gmail.com
• License