caphInput - Documentation

caph-input provides input supporting the caph's focus and key navigation caph.focus
With caph-input, you can set input which provides the input:text and input:password.
Caph input is set default action, you can change style or action through option and event handler.
When input is focused or blurred, 'focused' class is attached or detached automatically

You can set the input value in the option and bind to input's value.
If user changes input value, changed value can be checked through 'value' attribute.
Caph-input as jquery plugin only can be used with 'input' tag. If try use with other tag such as 'div' or something, caph-button throws a error.

Below are the options of the caph-input.

type	option	description
object	'focusOption'	focus name, focus group, disabled, initialfocus....
string	'inputClass'	Input class which applied to input. Default inputClass is 'caph-input'
string	'type'	Set the type of input. caph-input supports 'password' and 'text'
string	'value'	Set the value of input. Default value is empty string.
number	'maxLength'	Set the maxLength of input. Default value is '40'
string	'placeHolder'	Set the placeHolder of input. Default value is blank.
function	'onFocused'	Set the event handler when Input is focused. Input passes two parameters 'event' and 'originalEvent'
function	'onBlurred'	Set the event handler when Input is blurred. Input passes two parameters 'event' and 'originalEvent'
function	'onSelected'	Set the event handler when Input is selected. Input passes two parameters 'event' and 'originalEvent'
function	'onChanged'	Set the event handler when Input is changed. Input passes two parameters 'event' and 'value'. Parameter 'value' passes a input value when value is changed.

Example

    $('#Input1').caphInput({
             onFocused :function(event,originalEvent){
                  $(event.currentTarget).css({
                      border : '1px solid red'
                  });
             },
             onBlurred :function(event,originalEvent){
                 $(event.currentTarget).css({
                     border : ''
                 });
             },
             onChanged :function(event,value){
                 console.log("value", value);
             },
               type : 'text',
                maxLength : 40,
                placeHolder : 'place-holder',
                value:'input1'
         });

html

<input id="Input1">