skol-pro / ion-digit-keyboard-v2 Goto Github PK

C:\ion-digit-keyboard-v2 (master)
λ ionic serve
? Looks like this is an Ionic Angular project, would you like to install @ionic/cli-plugin-io
nic-angular and continue? Yes

npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
Error: Cannot find module '@ionic/app-scripts'

C:\ion-digit-keyboard-v2 (master)
λ ionic serve
Error: Cannot find module '@ionic/app-scripts'

Hi,

I want to tell that this plugin is great!

I just started having a problem after using it on multiple pages.

I am using subscribe method to get pressed keys and when I import it to more than one page (lazy loaded), it's emitting more than one press.

The problem will probably be that I was declaring it for each page separately.

How should I import it to have it globally and at the same time using lazy loading? (each page has own module)

Thank you very much!

Definitely going to donate after resolving this issues ;-)

By setting up an icon by iconName in IonDigitKeyboardOptions it will not be displayed in the App.
The specific code in the components html is in comments..
Uncommenting this leads to an error on building the app.

not working ionic 5 :( gesture problem

hi

How to switch between numbers keypad to alphabets keypad, its working for numbers but how to switch between from this numbers to alphabets what are displaying on keyboard. I need how to set the settings for this, please help me i need in Angular 5 please do need full

This package should be put on NPM!

code in ts file:
hideKeyboard(event?) {
console.log(event)
event.stopPropagation();
event.preventDefault();
IonDigitKeyboard.hide();
}

when i click the the confirm button the keyboard hide succesfully
but it cause the event in content behind the keyboard

toolbar above the togglebutton ,everytime i colse the keyboard
the toggle button event was called

can you help me resolve the problem ?
ths

Any plan to upgrade for ionic4/Angular7 ?

<div>{{stringName}}</div>
<button (click)="changModel()">click~</button>

ts.

changeModel(){
this.stringName += "0";
}

Is there a way to control the height of the keyboard in landscape-mode?
It takes up nearly the whole Screen and there is no space for showing the Input.

Hi, i need to know how to unsubscribe and clear() all events when
IonDigitKeyboard.hide();
because i using this keyboard on more than one page, which now when leave from one page and keyboard is show on another page, the last events example [ leftActionClick, rightActionClick ] still come from first page

// @TODO unsubscribe and use clear() method

thanks for your time
regards

hi,
while i am using i want to input decimal numbers then how can i insert a decimal operator on the keyboard and its functionality. Hence please help me

Hi @skol-pro

I'm using this plugin for IOS, Android and windows platforms. It is working fine in mobile devices but I can see an issue in desktop mode like windows surface device. Could please any one help me how to use this plugin to work in Desktop version also.

Thanks in advance.

is it possible to change the keyboard buttons design background to a custom one?
please let me know i have a photo for each number how can i append the current CSS

Hi,

I used this component its awesome working perfectly for numbers but coming for alphabets under the number keys how to trigger for alphabets. Hence please kindly help me.

regards,
chaitanya

when keyboard open it can not scroll page. is there any solution ?

Hello !

I develop an Ionic v3 application and I use your component (Thanks a lot for it :D).

HTML view

<ion-header>
    <ion-navbar hideBackButton>
        <ion-title>Connexion</ion-title>
    </ion-navbar>
</ion-header>


<ion-content padding>
    <div id="login-ico" text-center [class.hide]="isKeyboardVisible">
        <img src="assets/img/logo.png"/>
    </div>
    <form [formGroup]="pinFormGroup">
        <pin formControlName="pin" [keyboard]="keyboard" [content]="content"></pin>
        <div text-center padding-vertical [class.hide]="isKeyboardVisible">
            <span (click)="gotoForget()">J'ai oublié mon code</span>
        </div>
        <div text-center class="fix-bottom" [class.hide]="isKeyboardVisible">
            <button ion-button round large extend color="oscar-pink" (click)="validPin()" [disabled]="!pinFormGroup.valid">Valider</button>
        </div>
    </form>
</ion-content>

<ion-digit-keyboard
        [align]="keyboardSettings.align"
        [width]="keyboardSettings.width"
        [visible]="keyboardSettings.visible"
        [rightActionOptions]="keyboardSettings.rightActionOptions"
        [leftActionOptions]="keyboardSettings.leftActionOptions"
        [roundButtons]="keyboardSettings.roundButtons"
        [showLetters]="keyboardSettings.showLetters"
        [swipeToHide]="keyboardSettings.swipeToHide"
        [theme]="keyboardSettings.theme"
></ion-digit-keyboard>

TS file

import {Component, ViewChild} from '@angular/core';
import {Content, IonicPage, Keyboard, MenuController, NavController} from 'ionic-angular';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Bridge} from "../../../providers/bridge";
import {IonDigitKeyboardOptions} from "../../../components/ion-digit-keyboard/interfaces/ion-digit-keyboard.interface";
import {IonDigitKeyboardCmp} from "../../../components/ion-digit-keyboard/components/ion-digit-keyboard-cmp/ion-digit-keyboard-cmp";
import {LoaderProvider} from "../../../providers/loader";

@IonicPage()
@Component({
    selector: 'page-pin',
    templateUrl: 'pin.html',
})
export class PinPage {
    @ViewChild(IonDigitKeyboardCmp) keyboard;
    @ViewChild(Content) content;

    private pinFormGroup: FormGroup;
    public isKeyboardVisible: boolean = false;

    public keyboardSettings: IonDigitKeyboardOptions = {
        align: 'center',
        visible: false,
        rightActionOptions: {
            hidden: false,
            iconName: 'ios-checkmark-circle-outline',
            fontSize: '1.4em'
        },
        leftActionOptions: {
            hidden: false,
            iconName: 'ios-backspace-outline',
            fontSize: '1.4em'
        },
        roundButtons: false,
        showLetters: true,
        swipeToHide: true,
        theme: 'light'
    };

    constructor(public navCtrl: NavController,
                private _formBuilder: FormBuilder,
                private _bridge: Bridge,
                private _menuCtrl: MenuController,
                private _nativeKeyboard: Keyboard,
                private _loaderProdider: LoaderProvider) {

        this._menuCtrl.enable(false);

        this.pinFormGroup = this._formBuilder.group({
            pin: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{4}')])]
        });
    }

    ionViewDidLoad() {
        this.keyboard.onShow.subscribe(() => {
            this._nativeKeyboard.close();
            this.isKeyboardVisible = true;
        });

        this.keyboard.onHide.subscribe(() => {
            this.isKeyboardVisible = false;
        });
    }

    public gotoForget() {
        this.navCtrl.push('ForgetPinPage');
    }

    public validPin() {
        if (this.pinFormGroup.valid) {
            this._loaderProdider.present();
            this._bridge.checkPin(this.pinFormGroup.value.pin)
                .subscribe(() => {
                    this._loaderProdider.dismiss();
                    this._menuCtrl.enable(true);
                    this.navCtrl.push('IndexPage');
                });
        }
    }
}

But with this config no one icon are displayed :( What's the problem ?

thanks.

Hello friend, I noticed the "margin: 1px !important" of the .digit-keyboard-key class is overriding the "margin: 0 auto" when setting roundButtons to true, causing the number keys to not be centered. Thanks for the great little digit keyboard!

This file -
https://github.com/skol-pro/ion-digit-keyboard-v2/blob/master/src/components/ion-digit-keyboard/components/ion-digit-keyboard-cmp/ion-digit-keyboard-cmp.ts - loads google analytics using your key. Not sure we should be loading it.

Hey I came across a use case for HostListener that would be an awesome addition to this project.

Not sure if it already exists somewhere and i missed it though. but here's the following code i'm using.

`import {HostListener} from '@angular/core';`
`
export class MyClass{
    @HostListener('window:keyup', ['$event'])
     onKeyup(event: any) {
           if(event.key === 'Backspace'){
                this.onKeyboardButtonClick('left');
           }
           if(Number(event.key) >= 0 && Number(event.key) <=9){
                this.onKeyboardButtonClick(event.key);
           }
     }
}
`

Hi, thanks for the beautiful keyboard.

I got one issue the events don't work for me. I cloned your project and tested it there. It doesn't log the key inputs.

for example this function

numberClick(key: number) {
console.log('From event: ', key);
}

Am i missing something? I followed the docs from top to bottom.

Thanks in advance!

Hi Skol-pro, congratulations its so cool the keyboard, but nevertheless I don´t know what to do for show the button left and right, just apear the buttons with numbers.

I'd be grateful with your support.

Greetings...

I have a scrolling list of ion-inputs.. when I call up your keyboard it covers some of the inputs. Any suggestions on how to use it with a list of inputs. I can seem to figure out how to shrink the scrolling area so I can see the last inputs in the list.

Thank you in advance for your time..
Cheers.. Mark..

npm package please :)

Only occurs for fields that the keypad overlaps. Difficult to know what the user has inputted.
Great keyboard component by the way!

Followed your instructions in the Read Me file.

Does not work as advertised.

Key board cannot show or hide.

1. If 'ion-digit-keyboard' is an Angular component and it has 'roundButtons' input, then verify that it is part of this module.
2. If 'ion-digit-keyboard' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ns]="keyboardSettings.leftActionOptions"