Web Component: j-Edit
j-Edit
The component enables contenteditable
attribute for elements with edit
or edit2
classes.
- singleton
- put the component under
<body
element likej-Directory
orj-DatePicker
Good to know:
- each element with the
edit
class is possible to edit with a single click - each element with the
edit2
class is possible to edit with a double click
Configuration:
dateformat {String}
a default format for parsing dates (default:yyyy-MM-dd
)exec {String}
optional, a default path tofunction(opt, accept(boolean/html_value_for_the_element))
- NEW
floating {Boolean}
optional, can enables floating by default (default:false
) - NEW
minwidth {Number}
optional, a min width - NEW
offsetX {Number}
optional, X offset - NEW
offsetY {Number}
optional, Y offset
data-edit
attribute supports:
required
{Boolean} optional, enables "required" (default:false
)type
{String} optional, can bestring
(default),date
,number
,boolean
,email
,url
, orhtml
check {String}
optional, a path tofunction(opt, el)
must returnboolean
, it meansCan the user edit that field?
exec {String}
optional, a path tofunction(opt, accept(boolean/html_value_for_the_element))
format {String}
optional, a format fordate
, default:yyyy-MM-dd
maxlength {Number}
a maxlengthminvalue {Number}
a min. value for number type (default:undefined
)maxvalue {Number}
a max. value for number type (default:undefined
)bind {Boolean}
iftrue
rebindsdata-bind
on this element only (default:true
)multiline {Boolean}
optional, enables multiline + appends classeditable-multiline
(inline-block
+width:100%
) when it's editing (default:false
)floating {Boolean/String}
optional, enables floating window for the element (default:false
,string
can containposition
oroffset
values)offsetX {Number}
optional, additional X offset for the floating windowoffsetY {Number}
optional, additional Y offset for the floating windowoffsetWidth {Number}
optional, additional width for the floating windowwidth {Number}
optional, a fixed width for floating panelparent {String}
optional, a selector for obtaining of offset (can containparent
or jQuery selector for.closest()
method)selectall {Boolean}
optional, selects all textcursor {String}
optional, a cursor positionbeg
orend
(default)notify {String}
optional, a path tofunction(opt)
that will be notified after successful changeprevent {Boolean}
optional, executes.preventDefault()
and.stopPropagation()
in the click event- NEW:
align {String}
optional, sets a valeu for the text-align property for the floating mode only
Author
- Peter Širka petersirka@gmail.com
- License
Created
09. november 2021
Updated
25. january 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
