Adds a pop-up element to inputs/textareas on focus with additional options for explicit accept/cancel actions.
Call the placard control via JavaScript:
{% highlight js %}$('#myPlacard').placard();{% endhighlight %}The placard will automatically instantiate any placard with data-initialize="placard". If you add the control markup after page load with data-initialize="placard", the control will initialize on focus.
Use the following markup for a simple input OR textarea OR contenteditable div placard:
{% highlight html %}For header and footer content, use the following input OR textarea OR contenteditable div placards:
{% highlight html %}data-ellipsis="true" to the placard element to enable ellipsis on the placard-field. Inputs and regular contenteditable divs use CSS.
JavaScript is used to enable ellipsis for textareas and contenteditable divs with data-textarea="true". Use the .('getValue'); and .('setValue'); methods to retrieve or set values for placards with ellipsis enabled to avoid incorrect values.
Be warned: performance drops with large fields for the JavaScript solution when ellipsis is enabled.data-textarea="true" to the .placard-field element if using a contenteditable div to make that element look and behave more like a textarea.Add the glass class to the input, textarea, or contenteditable div with class placard-field
for a field with minimalistic chrome unless hovered upon or clicked.
You can pass options via JavaScript upon initialization.
| Name | type | default | description |
|---|---|---|---|
| explicit | boolean | false | Requires the user explicitly select 'accept' or 'cancel' before the placard is dismissed. |
| externalClickAction | string | cancel | Specifies what action occurs on an external click (click outside the placard element). |
| externalClickExceptions | array | [ ] | Array of jQuery selector strings. Anything that matches the selector (searched globally) will not count as an external click. Allows other items to be clicked without dismissing the placard. |
| onAccept | function | undefined | Call this function when the user indicates they want to 'accept' changes. Passes a
helpers object containing previousValue and current
value as an argument. The default accept behaviors will not occur, so you can determine what happens next. Useful for validation purposes.
|
| onCancel | function | undefined | Call this function when the user indicates they want to 'cancel' changes. Passes a
helpers object containing previousValue and current
value as an argument. The default cancel behaviors will not occur, so you can determine what happens next. Useful for validation purposes.
|
| revertOnCancel | boolean OR number | -1 | Dictates whether the placard reverts the entered value when a 'cancel' action occurs. -1 checks
for a '.placard-accept' element on initialization, setting this value to true
if present. Also accepts true or false values.
|
| Parameter | description |
|---|---|
| value | Required. String or number used to set the placard value. |
| Event Type | Description |
|---|---|
| accepted.fu.placard | Fires when the user indicates the desire to 'accept' changes. This event fires after the onAccept function, if defined. |
| cancelled.fu.placard | Fires when the user indicates the desire to 'cancel' changes. This event fires after the onCancel function, if defined. |
| hidden.fu.placard | Fires when you dismiss the placard and the popup disappears. |
| shown.fu.placard | Fires when the placard obtains focus and the popup appears. |
All placard events are fired on the .placard classed element.
Adds a pop-up element to inputs/textareas/contenteditable-divs on focus with additional options for explicit accept/cancel actions.