Web UI component: j-Edit

j-Edit

The component enables contenteditable attribute for elements with edit or edit2 classes.

Good to know:

Configuration:

dateformat {String} a default format for parsing dates (default: yyyy-MM-dd)

data-edit attribute supports:

required {Boolean} optional, enables "required" (default: false)
type {String} optional, can be string (default), date, number, boolean, email, url, or html
check {String} optional, a path to function(opt, el) must return boolean, it means Can the user edit that field?
exec {String} optional, a path to function(opt, accept(boolean/html_value_for_the_element))
format {String} optional, a format for date, default: yyyy-MM-dd
maxlength {Number} a maxlength
minvalue {Number} a min. value for number type (default: undefined)
maxvalue {Number} a max. value for number type (default: undefined)
bind {Boolean} if true rebinds data-bind on this element only (default: true)
multiline {Boolean} optional, enables multiline + appends class editable-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 contain position or offset values)
offsetX {Number} optional, additional X offset for the floating window
offsetY {Number} optional, additional Y offset for the floating window
offsetWidth {Number} optional, additional width for the floating window
parent {String} optional, a selector for obtaining of offset (can contain parent or jQuery selector for .closest() method)
selectall {Boolean} optional, selects all text
cursor {String} optional, a cursor position beg or end (default)

Dark mode

Preview