Web UI 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
.
Configuration:
type
{String} optional, can beemail
,phone
,password
,zip
,date
(needsdatepicker
component),time
,color
(needscolorpicker
component),icon
(needsfaicons
component),emoji
(needsemoji
component),url
,number
,search
,lower
,upper
or empty (default)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 methodfunction(component, input)
ricon
{String} optional, right icon e.g.home
,cog
, etc.riconclick
{String} optional, a path to methodfunction(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
or1
/center
after
{String} optional, it means a char after label (default::
)autofill
{Boolean} optional, enables browser's autofill feature (default:false
)placeholder
{String} optional, adds aplaceholder
text into the inputmaxlength
{Number} optional, sets a maximum length of chars (default:200
)minlength
{Number} optional, sets a minimum length of charsminvalue
{Number} optional, a minimal value fornumber
typemaxvalue
{Number} optional, a maximal value fornumber
typeincrement
{Number} optional, sets a value for incrementing (default:1
)validate
{String} optional, a condition for validating of value, can contain a link tofunction(value)
or!!value.match(/[a-z]+/)
format
{String} optional, output formatting e.g. fordate
type:yyyy-MM-dd
, fortime
type:HH:mm
, fornumber
you can define max. decimalsdisabled
{Boolean} optional, disables this componenterror
{String} optional, adds astring
text under the componentautocomplete
{String} optional, needs to contain a link to a function, is triggered onfocus
eventspaces
{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 tofunction(search, next)
(path must contain/
or you need to enabledirajax:true
) or NEW:id|name,id|name
dircustom
{String/Boolean} optional, can contain a path tofunction(val, next(new_val))
or can beBoolean
. This option can enable adding a custom value (value not defined in data-source)dirrender
{String} optional, a path tofunction(item, text)
(must return HTML forj-Directory
), this function can affect list of items inj-Directory
dirminwidth
{Number} optional, a minimum width forj-Directory
, default:200
dirmaxwidth
{Number} optional, a maximum width forj-Directory
diroffsety
{Number} optional,Y
offset (default:0
)diroffsetx
{Number} optional,X
offset (default:0
)dirplaceholder
{String} optional, a placeholder forj-Directory
dirempty
{String} optional, adds an empty field forj-Directory
dirkey
{String} optional, a key name for reading oftext
indirsource
(default:name
)dirvalue
{String} optional, a key name for reading ofvalue
indirsource
(default:id
)direxclude
{Boolean} optional, excludes a current value fromj-Directory
(default:true
)dirsearch
{Boolean/String} optional, can disable search inj-Directory
(default:true
) or{String}
(key name) can map a value for searchingdirraw
{Boolean} optional, can disable escaping of items forj-Directory
(default:false
)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 tosearch
function inautocomplete
,function(search, render(arr))
autovalue
{String} a property path for the value inautosource
, default:name
autoexec
{String} a path methodfunction(item, next(value_to_input))
searchalign
{Number} can align icon ontype:search
to left (2
) or right (1
, default)forcevalidation
{Boolean} enables for force validation forphone
andemail
(default:true
)camouflage
{Boolean/String} masks the value in the input after is triggeredblur
event (default:false
) or it can beString
which will be used as a camouflagemonospace
{Boolean} enablesmonospaced
font (default:false
)
Interesting:
type:date
needsdatepicker
componenttype:time
needstimerpicker
componentdirsource:path.to.datasource
needsdirectory
component- if
licon
orricon
starts with!
then the component render a raw value instead oficon
ui-input-ok
class is binded when the input is validated and filled
Author
- Peter Širka petersirka@gmail.com
- License
Created
26. january 2019
Updated
01. february 2021
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
