Following your change that destroys the keyboard when scope is destroyed, an error is sometimes thrown in the console when for some reason the keyboard doesn't exist.

Would it be possible to add an if-statement to check whether or not the keyboard is actually available?

scope.$on('$destroy', function() {
	if($(elements[0]).getkeyboard()) $(elements[0]).getkeyboard().destroy();
});

Everytime I change webpages I get the following error thrown in the console:

TypeError: Cannot read property 'destroy' of undefined
    at ng-virtual-keyboard.js:138
    at Scope.$broadcast (angular.js:18005)
    at Scope.$destroy (angular.js:17623)
    at cleanOld (angular-ui-router.js:3978)
    at angular-ui-router.js:3984
    at processQueue (angular.js:16383)
    at angular.js:16399
    at Scope.$eval (angular.js:17682)
    at Scope.$digest (angular.js:17495)
    at angular.js:17721

Thanks

excese me
Im a new learner, see the ng-virtual-keyboard, i cant find how to use chinese ,maybe i not find ,please help me,thank you very much

Hi,
I am trying to use this keyboard in an ionic application. I've implemented it, but unable to make it work when used with ionic modal input. When I use it with ionic modal input, keyboard is visible, but unable to click.i.e, when I click on the virtual keyboard, area beneath it get clicked.

I'm adding the keyboard after the modal is shown,

$scope.$on('modal.hidden', function() {
    // Execute action
    $('.modal input').each(function() {
        $(this).data('keyboard').destroy();
    });
});

$scope.$on('modal.shown', function(event) {
    // Execute action
    var asdf = $('.modal input').keyboard();
    $('.modal input').keyboard({
      layout: 'qwerty',
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 50
    });
});

Can anyone please suggest some fixes?

Hi,

Thanks for a great wrapper to a great library.

If typing into a text input field, an ngChange is usually fired per keypress, whereas it is only fired on accept with ng-virtual-keyboard. Is there a way of causing an ngChange event to be fired per keypress?

Thanks,
Rory

TypeError: $(...).keyboard is not a function at ng-virtual-keyboard.js:96:30

ReferenceError: $ is not defined
at Object.attach (http://localhost:8000/app/js/ng-virtual-keyboard.js:80:19)

html is

and controller.js is

var phonecatApp = angular.module('phonecatApp', ['ng-virtual-keyboard']);

function PhoneListCtrl($scope, $http, ngVirtualKeyboardService) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
$scope.phones = data.splice(0, 5);
});

$scope.myKeyboard = {
    layout: 'alpha',
    extensions: {
        addTyping: false
    }
};

$scope.onKeyboardClick = function (id) {
    $scope.myProperty = "made it this far " + id;
    var keyboard = ngVirtualKeyboardService.getKeyboardById(id); 
    if (keyboard) {
        $scope.myProperty = "keyboard is known "+ keyboard.isOpen;

        if (keyboard.isOpen) {
            keyboard.close();
        } else {
            keyboard.reveal();
        }
    }
};
$scope.orderProp = 'age';

}
PhoneListCtrl.$inject = ['$scope', '$http', 'ngVirtualKeyboardService'];

phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

Hi @antonio-spinelli,

I am trying to integrate ng-virtual-keyboard in my Angular6 project, but getting 'error TS2307: Cannot find module 'ng-virtual-keyboard''

Steps I do -

1. npm install ng-virtual-keyboard
2. npm install --save @types/virtual-keyboard (this command mentioned in 'TypeScript' section of 'https://github.com/Mottie/Keyboard')

package.json -

{
   "dependencies": {
      "@angular/compiler": "^6.1.10",
      "@angular/core": "^6.1.10",
      ...
      "@types/virtual-keyboard": "^1.26.1",
      "ng-virtual-keyboard": "^0.4.0",
      "rxjs": "~6.6.0",
      "tslib": "^2.0.0",
      "zone.js": "^0.8.28"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "^0.12.2",
      "@angular/cli": "^7.2.2",
      "@angular/compiler-cli": "^6.1.10",
      ...
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "^2.9.2"
   }
}

Did I miss anything? Thanks in advance.

Hi,
I use the lockInput property to disable the native keyboard which makes the input field readonly. This also removes the cursor from the text area.
But we also want the cursor to be displayed on the field.
In jQuery/mottie keyboard we use the caret extention like this

$('#keyboard')
  .addCaret({
                caretClass : 'blinking-cursor',
    		charAttr   : 'data-character',
    		charIndex  : 1,
    		offsetX    : 0,
    		offsetY    : 20,
    		adjustHt   : 0
})

How to use the same by specifying the properties in the controller?
Thanks.

I've got ng-virtual-keyboard working in my project, but whenever I dismiss it (either by clicking the accept button or the cancel button), the copy entered via the virtual keyboard isn't present in the textarea that the virtual keyboard's text area overlays.

I believe the mottie config parameter for this is 'autoAccept: true', which has worked for me when I've used it before. However, I've tried passing this config parameter in a number of different ways, and it doesn't seem to have any affect.

myApp.config(['VKI_CONFIG', function(VKI_CONFIG) {
            VKI_CONFIG.position = {
                of: 'body',
                my: 'center top',
                at: 'center bottom'
            };
            VKI_CONFIG.keyboard = {
                autoAccept: true,
                stayOpen: true
            };
            VKI_CONFIG.stayOpen = true;
            VKI_CONFIG.autoAccept = true;
            VKI_CONFIG.tabNavigation = true;
            VKI_CONFIG.css = {
                container: 'blue-grey darken-1',
                buttonDefault: 'btn waves-effect waves-light',
                buttonAction: 'orange',
                buttonDisabled: 'disabled'
            };
        }]

I've also tried using it in the directive call:

    <textarea name="more-information" cols="40" class="form-control" id="keyboard" rows="3" ng-model="submission.more_information" ng-virtual-keyboard="{layout: 'alpha', autoAccept: true, stayOpen: true}"></textarea>

The documentation doesn't give any clear examples of where you would add these config parameters in. I would guess the VKI_CONFIG calls, but in my case, it's not working.

Hi, how could I initialize the keyboard to open with keys in uppercase( aka caps lock on)?

I want to update the VKI_CONFIG.relative value dynamically . like the user have a choice to change the keyboard relative value, and see the change.

Hi, is it possible to do this ? if yes can you tell me how ?

thanks

Hello, thank you for the quick response on my latest issue.
The code you wrote works, except you made a typo on line 117:

I'm fairly sure this has to be var element = elements[0].

Thank you for your time and your port!

Is it possible to add functionality to suppress the native keyboard when viewing a HTML5 site that uses ng-virtual-keyboard for its text fields and areas?

cc @Chhaya-rai

How do i change the language of the keyboard ?
Is there a layout directive ?

Hi Mottie,
My issue is that, when i type a word in the input field , the ng-modal is not updated. The input field still shows ng-empty. Any way to fix this?

Thanks in advance.