trochette / ng-keypad

AngularJS on screen keypad that can be customized to your needs. Mobile compatible.

ng-keypad

ng-keypad is a simple set of directive that allow you to create a custom keypad to provide on screen user input functionnality. Mobile and desktop compatible. You can view a demo here : View Demo.

Keypad design by Courtny Cotten

Usage

//Basic usage
<div data-ng-keypad="numeric">
    // Insert key pad template here.
</div>

//Combined with ng-include
<div data-ng-keypad="numeric">
     <div ng-include="" src="'partials/keypad/numeric.html'"></div>
</div>

Options

• data-ng-keypad REQUIRED Specify ID for the keypad instance. You can have multiple keypads in the same application.
• data-auto-close Set that to true and the keypad will automatically close when user click outside of it.
• data-ng-draggable Use for the ng-draggable directive. Allowing the keypad to be moved on screen.

ng-key

Usage

 //Basic usage - This dispatch Keypad.KEY_PRESSED event
 <button data-ng-key="1">1</button>

 //Custom or modifier key - This dispatch Keypad.MODIFIER_KEY_PRESSED event. Those events need to be handled by your application.
 <button data-ng-key="[CLEAR]">Clear</button>

ng-keypad-input

Usage

 //Basic usage
 <input class="input" data-ng-model="inputModel" data-ng-keypad-input="numeric" />

 //It can also be used on a tag to prevent keyboard to show up on mobile devices
 <a class="input" data-ng-model="inputModel" data-ng-keypad-input="numeric" ></a>

Options

• data-ng-model REQUIRED Instance of ng-model that will key updated by the keypad.
• data-ng-keypad-input REQUIRED Specify ID of the ng-keypad instance you want to open when user focus or click on the field.
• data-ng-keypad-restrict Restrict character or input value using regular expression.

ng-keypad's Issues

Does not update inputs

When using the module on an input element the input does not get updated in the interface

Angular 1.3?

Possible to get this guy working in Angular 1.3?

Next and Prev

Hello Trochette -

I am trying to incorporate your keyboard and everything is working splendid, except for next and previous.

I incorporated it into my controller and the code is firing and .focus() is called but it doesn't actually focus.
I think it might have to do with timing. Thoughts?

preselect text

Hi Tommy

Don't know how to reach you besides here.
I have feature request.
Would it be possible to have the possibility to preselect all the text in the input on focus so that if the user starts to type new numbers, the old number gets overwritten instead of appended?

Best Regards
Peter

Model does not get updated when nested objects

The module fails when using nested objects inside ng-model

example:

ng-model="test"
works

ng-model="test.test"
fails

test.test does not get updated

KeypadInput doesn't work if it's rendered inside ng-repeat

The directive works well as expected. However, when I try to render a list of keypad-input using ng-repeat, the model couldn't be updated. Keypad emits the event still but InputKeyboard couldn't listen to it. Do you know how to solve this issue.
Below is the code snippet used to render list of keypadInput:

<a ng-repeat="i in[0,1,2]" class="input" data-ng-model="input3" data-ng-keypad-input="numeric" tabindex="1">{{input3}}</a>

KEYPAD.handleKeyPressed triggers

 function handleKeyPressed(event, key) {
                $scope.$emit(Keypad.KEY_PRESSED, key, padId);
        }

... but KEYPADINPUT.handleKeyPressed() never get called.

Space and Backspace Issue

Hello Trochette. You're numeric keyboard is cool.

I created an App which makes use of your keyboard. However, it needs to be in a qwerty layout. I've managed to add the values of all characters except for the space and backspace.

would be glad if you can add some insight regarding this?

the app runs in ionic framework.