# j-RawEditable

> j-RawEditable is a simple component with a big hidden functionality. It's targeted for additional customization.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 0f36f17ea6ef34bf9119f86090d868fbe8769108d38a43546c79b3729ac1a67f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__j-RawEditable__ is a simple component with a big hidden functionality. It's targeted for additional customization.


__Configuration__:

- `type {String}` optional, can be `email`, `phone`, `zip`, `date`, `time`, `url`, `number`, `search`, `lower`, `upper` or empty (default)
- `formatting {Boolean}` enables formatting bold, italic, etc., default: `false`
- `required {Boolean}` optional, enables "required" (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
- `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
- `disabled {Boolean}` optional, disables this 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`)
- `autosource {String}` a path to `search` function in `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` a property path for the value in `autosource`, default: `name`
- `autoexec {String}` a path method `function(item, next(value_to_input))`
- `forcevalidation {Boolean}` enables for force validation for `phone` and `email` (default: `true`)
- `monospace {Boolean}` enables `monospaced` font (default: `false`)
- `enter {String}` a link to `function(val, com)` - evaluated when the user presses enter

Use it with `<ui-component name="raweditable">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<b>Type something</b>: <span><ui-component name="raweditable" path="form.name" config="placeholder:Placeholder" style="position:relative;display:inline-block;min-width:80px;height:24px;line-height:20px;border:2px solid blue;padding:0 5px"></ui-component></span>

<script>
	var form = { name: 'Peter' };
</script>
```