Web Component: j-Editable


  • Info
  • HTML
  • JS
  • CSS
  • Meta
Questions? Write us

j-Editable

This component can edit all elements with editable class. It works with data-bind or dynamic values. Learn more from example.

Configuration:

  • autofocus {Boolean} focuses first item (default: false)
  • validate {Boolean} can disable validation (default: true)
  • disabled {Boolean} can disable editing (it adds ui-editable-disabled and ui-editable-enabled class), default: false
  • changed {String} optional, a link to a method or path --> it will contain the object with changed values only
  • enter {String} optional, a link to a method method(path, value, el), the method is executed if the user presses ENTER
  • escape {String} optional, a link to a method method(path, value, el), the method is executed if the user presses ESC
  • can {String} optional, a link to method method(opt, el) must return boolean, it means can edit?
  • error {String} optional, a link to method method(el, isInvalid, meta) is evaluated when the item is invalid and vice-versa
  • NEW class {String} optional, adds a class name in the form ui-editable-CLASS (default: default)

data-editable attribute describes behaviour:

  • path {String} a relative path to property (can be inherited from data-bind automatically)
  • required {Boolean} optional, enables "required" (default: false)
  • type {String} optional, can be string (default), date, number, boolean, email or html NEW tags
  • can {String} optional, a path to function(opt, el) must return boolean, it means can edit?
  • save {String} optional, a path to function(opt, accepted(boolean)), accepted function must be evaluated
  • format {String} optional, a format for date, default: yyyy-MM-dd
  • dirsource {String} optional, path to a data-source
  • 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
  • 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)
  • dirsearch {Boolean} optional, can disable search for j-Directory
  • autosource {String} a path to search function in autocomplete, function(search, render(arr))
  • autovalue {String} a property path for the value in autosource
  • maxlength {Number} a maxlength
  • minvalue {Number} a min. value for number type (default: undefined)
  • maxvalue {Number} a max. value for number type (default: undefined)
  • rebind {Boolean} if true rebinds data-bind on this element only (default: 0)
  • validate {String} optional, a condition for validating of value, can contain a link to function(value) or !!value.match(/[a-z]+/)
  • multiline {Boolean} optional, enables multiline + appends class editable-multiline (inline-block + width:100%) when it's editing (default: false)
  • raw {Boolean} optional, when true then the current HTML content will be as a placeholder if the value is nullable (default: true)
  • accept {String} optional, a condition for accepting of value, can contain a link to function(value) or !!value.match(/[a-z]+/) is similar to validate
  • empty {String} optional, enables empty value and can contain empty label or 1 or true for auto rebind of binder
  • invalid {String} optional, a link to method method(el, isInvalid, meta) is evaluated when the item is invalid and vice-versa

Methods:

  • NEW: component.changed() returns an object with changed data

Good to know:

  • if the user presses some key then the editable element will contain keypressed class as long as they haven't left the control
  • each changed element will contain class changed
  • if the component changes some values, the main element will contain class ui-editable-changed
  • if the element has data-bind with empty, it will be cleared after focus
  • NEW now supports tags type. For now supports only with rebind and data-bind. (data-bind template with {jQuery selector} works from +v18)
  • NEW if the element (or parent, or parent of parent) contains attribute data-disabled="1", the control will be disabled
  • NEW hidden and disabled elements won't be validated

Author

Real-time preview

Refresh previewDownload HTMLSource-Code on GitHub