Editable Field

Div editing a target input

<ol>
    <li>
        <input id="valueId" value="Edit the other div to change my value" class="w-100" />
    </li>
    <li>
        <div id="editable-div1" data-fc-modules="editable" data-fc-class="w-100" d data-fc-tag="input" data-fc-input-id="valueId" data-fc-edit-type="full" data-fc-enter-behaviour="stopedit">
            Click me, edit me and I will update the input
        </div>
    </li>
</ol>

Link to convert a div to editable and send data using mediator

<ol>
    <li>
        <div id="editable-div2" data-fc-modules="editable"  data-fc-mediator="channel:any" data-fc-tag="input" data-fc-class="any">
            Click the buttons bellow me to toggle editable.
        </div>
    </li>
    <li>
        <a onclick="$('#editable-div2').trigger('editable', {editable: true})" class="button _small _success">Editable=true</a>
        <a onclick="$('#editable-div2').trigger('editable', {editable: false})" class="button _small _error">Editable=false</a>
    </li>
</ol>

Attributes

data-fc-mediator

Mediator event to publish new data when editable value is changed.

data-fc-tag

Editable element tag, when field is set to editable state, original element is hidden an a new element tied to original is created using this tag.

DEFAULT: input

data-fc-class

Class for the new editable element.

data-fc-input-id

If specified, value changes will also be stored on element with indicated ID.

data-fc-edit-type

Manages click/focusout events to automate editable state. 'full' => 'click' + 'focusout'. 'click' => When element is clicked, editable state is triggered automatically & element gets focus. 'focusout' => When element lost focus, not editable state is triggered automatically.

DEFAULT: none

data-fc-enter-behaviour

Allow to change enter key behaviour on editable element. 'block' => Ignore enter key, useful to avoid form submissions. 'stopedit' => Enter forces component no editable state.

DEFAULT: none

data-fc-mobile

Disables this component in any mobile or tablet device (touch devices)

DEFAULT: true

data-fc-placeholder

Placeholder text if the html element is empty

DEFAULT: Edit here