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 controller and bind to input's value.
If user changes input value, changed value can be checked.
For example, as below, you can set and bind value using variable. Changed data is updated at the variable.
$scope.testValue = "inputvalue";
<caph-input value="testValue">| type | option | description |
|---|---|---|
| object | 'focus-option' | focus name, focus group, disabled, initialfocus.... |
| string | 'input-class' | 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 | 'max-length' | Set the maxLength of input. Default value is '40' |
| string | 'place-holder' | Set the placeHolder of input. Default value is blank. |
| function | 'on-focused' | Set the event handler when Input is focused. Input passes two parameters '$event' and '$originalEvent' |
| function | 'on-blurred' | Set the event handler when Input is blurred. Input passes two parameters '$event' and '$originalEvent' |
| function | 'on-selected' | Set the event handler when Input is selected. Input passes two parameters '$event' and '$originalEvent' |
| function | 'on-changed' | 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
js
var myApp = angular.module('myApp', ['caph.ui', 'caph.focus']);
myApp.controller('myController', ['$scope', 'focusController', function($scope,focusController){
$scope.focus = function($event,$originalEvent) {
$($event.currentTarget).css({
border : '1px solid red'
});
};
$scope.blur = function($event,$originalEvent) {
$($event.currentTarget).css({
border : ''
});
};
$scope.change = function($event,value) {
console.log("Changed value : ",value);
}
$scope.inputValue = "testing_";
}]);html
<caph-input on-changed="change($event,value)" on-focused="focus($event, $originalEvent)" on-blurred="blur($event, $originalEvent)" value="inputValue" max-length="30" place-holder="place holder"></caph-input>