В моем проекте, здесь я использую директиву numericKeyboardInput для цифровой клавиатуры. Работает хорошо, но я хочу набрать какое-то число, сначала я хочу дотронуться до поля ввода, а затем ввести что-то там, как этого избежать,Здесь моя цифровая клавиатура автоматически открывается при загрузке страницы и проверяет поля ввода автофокуса
//JS Code
//--------------- This is directive------------------------------
(function (){
'use strict';
angular.module('numericKeyboard').directive('numericKeyboardInput', numericKeyboardInput);
function numericKeyboardInput(numericKeyboardService, $timeout, $browser){
return{
restrict: 'A',
require: '^ngModel',
scope:{
ngBind:"=",
getterSetter: "&",
abondonCallback: "&"
},
link: function(scope, element, attrs, ctrl){
scope.numericService = numericKeyboardService;
element.bind('click', function(){
var element_to_scroll_to = document.getElementById(element.attr("id"));
element_to_scroll_to.scrollIntoView({block: "end", behavior: "smooth"});
element.addClass("keyboard-focus");
ctrl.$viewValue = "";
scope.numericService.open();
if(attrs.maxLength) scope.numericService.maxLength(attrs.maxLength);
if(angular.isDefined(attrs.getterSetter)){
scope.numericService.getterSetter(scope.getterSetter);
}
else{
scope.numericService.getterSetter(null) ;
}
scope.numericService.setModel(ctrl);
$timeout(function(){
scope.$digest();
});
scope.$watch('numericService.isDone()', function(value){
if(value){
element.removeClass("keyboard-focus");
if(ctrl.$modelValue !== ctrl.$$lastCommittedViewValue){
scope.abondonCallback();
}
scope.ngBind = ctrl.$viewValue;
$browser.defer(listener);
}
}, true);
scope.$watch('numericService.getModel()', function(){
$browser.defer(listener);
// if(attrs.formatter==="time"){
// timeFormatter(ctrl.$viewValue);
// }
scope.ngBind = ctrl.$viewValue;
// element.val(ctrl.$viewValue);
}, true);
});
var listener = function(){
var formatted = ctrl.$viewValue;
if(attrs.formatter==="time"){
if(ctrl.$viewValue && ctrl.$viewValue.length>6){
ctrl.$viewValue = ctrl.$viewValue.slice(0,6);
}
formatted = timeFormatter(ctrl.$viewValue);
}
// scope.ngBind = ctrl.$viewValue;
element.html(formatted);
};
String.prototype.replaceAt=function(index, character) {
return this.substr(0, index) + character + this.substr(index+character.length);
};
var timeFormatter = function(value){
var _time = "00:00:00";
var curr_index = 7;
for(var i = value.length-1; i >= 0; i--){
if(curr_index<0){
break;
}
_time = _time.replaceAt(curr_index, value[i]);
curr_index--;
if(curr_index===5 || curr_index === 2){
curr_index--;
}
}
return _time;
};
}
};
}
})();
//---------------------------This is a template code---------------------------
(function(){
'use strict';
angular.module('numericKeyboard', []);
angular.module('numericKeyboard').directive('numericKeyboard', numericKeyboard);
function numericKeyboard(numericKeyboardService){
return{
restrict: 'E',
require: '',
scope:{},
template: template,
link: function(scope){
scope.numericService = numericKeyboardService;
scope.append = function(key){
scope.numericService.append(key,scope);
};
scope.done = function(){
scope.numericService.done();
};
scope.clear = function(){
scope.numericService.clear();
};
scope.close = function(){
scope.numericService.done();
scope.isOpen = false;
};
scope.stopPropagation = function(event){
event.stopPropagation();
};
scope.$watch('numericService.isOpened()', function(){
scope.isOpen = scope.numericService.isOpened();
}, true);
}
};
}
var template = '\
<p id="output-text" numeric-keyboard-input="" ng-model="simple" ng-bind="simple" style="padding: 10px;"></p>\
<div class="keyboard" ng-show="isOpen" ng-click="close()">\
<div class="keyboard-content" ng-click="stopPropagation($event)">\
<table style="width: 300px;">\
<tr>\
<td><button class="keyboard-cell" ng-click="append(\'1\')">1</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'2\')">2</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'3\')">3</button>\
</td>\
<td><button style="width: 61px;" class="keyboard-cell" ng-click="append(\'4\')">4</button>\
</td>\
</tr>\
\
<tr>\
<td><button class="keyboard-cell" ng-click="append(\'5\')">5</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'6\')">6</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'7\')">7</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'8\')">8</button>\
</td>\
</tr>\
\
<tr>\
<td><button class="keyboard-cell" ng-click="append(\'9\')">9</button>\
</td>\
<td><button class="keyboard-cell" ng-click="append(\'0\')">0</button>\
</td>\
<td><button class="keyboard-cell keyboard-dot" ng-click="append(\'.\')">.</button>\
</td>\
<td><button class="keyboard-cell keyboard-clear" ng-click="clear()">X</button>\
</td>\
</tr>\
<tr>\
\
<td><button class="keyboard-cell keyboard-done" ng-click="append(\'+\')">+</button>\
</td>\
<td><button class="keyboard-cell keyboard-done" ng-click="append(\'-\')">-</button>\
</td>\
<td colspan="2"><button style="width: 145px;" class="keyboard-cell keyboard-done" ng-click="done()">Set</button>\
</td>\
</tr>\
</table>\
</div>\
</div>\
';
})();
//--------------------------- This is numeric keyboard service and functions----
(function(){
'use stric';
angular.module('numericKeyboard').factory('numericKeyboardService',numericKeyboardService);
function numericKeyboardService(){
var model = null;
var opened = false;
var maxLength = null;
var getterSetter = null;
var doneEditing = false;
var sample = "";
var service = {
setModel: setModel,
clear: clear,
setModelValue: setModelValue,
isDone: isDone,
done: done,
append: append,
getModel: getModel,
open: open,
isOpened: isOpened,
close: close,
maxLength: setMaxLength,
getterSetter: setGetterSetter
};
return service;
function setModel(newModel){
model = newModel;
}
function clear(){
model.$viewValue = "";
model.$render();
//$scope.sample = "";
}
function setModelValue(){
doneEditing = true;
if(model.$viewValue===""){
model.$rollbackViewValue();
return;
}
if(getterSetter){
model.$viewValue = getterSetter({newValue: model.$viewValue});
model.$commitViewValue();
return;
// scope.ngBind = model.$viewValue;
}
model.$commitViewValue();
}
function isDone(){
return doneEditing;
}
function done(){
this.setModelValue();
this.close();
}
function append(key,scope){
if(maxLength){
if(model.$viewValue.length >= maxLength){
return;
}
}
if(model != null){
model.$viewValue += key;
model.$render();
}
}
function getModel(){
return model.$viewValue;
}
function open(){
maxLength = null;
doneEditing = false;
model = "";
getterSetter = null;
opened = true;
}
function isOpened(dt){
return true; // this is used bcoz keyboard open automatic
}
function close(){
opened = false;
}
function setMaxLength(max){
maxLength = max;
}
function setGetterSetter(GS){
getterSetter = GS;
}
}
})();
//----------------- This is HTMl Code-----------
<p id="output-text" numeric-keyboard-input="" ng-model="simple" ng-bind="simple" style="padding: 10px;"></p>
Проверьте следующую ссылку plunkr http://plnkr.co/edit/h3ag1KfJHxbFWYFj4DVQ?p=preview