How to switch between numbers keypad to alphabets keypad

[chaitanyas11]

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

[skol-pro]

Well there is no default handling for typing letters. You'll need to bind it your-self.

this.keyboard.onClick.subscribe((key) => {
    if (key === 2) {
        // You can handle multiple press with a timeout to switch between A, B or C
    }
    if (key === 3) {
        // ...
    }
    // ...
});

[chaitanyas11]

hi,

would u please provide me atleast multiple press logic for any one button.

thanks and regards, chaitanya

[skol-pro]

I wrote it quickly, haven't been able to test it, so give it a test and tell me.

<input type="text" [(ngModel)]="model">

public model = '';

private lastKey;
private keyCount = -1;
private keyPressTimeout;
private keyMapping = {
    2: ['A', 'B', 'C'],
    3: ['D', 'E', 'F'],
    4: ['G', 'H', 'I'],
    5: ['J', 'K', 'L'],
    6: ['M', 'N', 'O'],
    7: ['P', 'Q', 'R', 'S'],
    8: ['T', 'U', 'V'],
    9: ['W', 'X', 'Y', 'Z']
};

// ...

constructor() {

    this.keyboard.onClick.subscribe((key) => {
        if (this.keyPressTimeout) clearTimeout(this.keyPressTimeout);

        if (this.keyMapping[key]) {
            if (key === this.lastKey) {
                this.keyCount++;
            }

            const letter = this.keyMapping[key][this.keyCount % this.keyMapping[key].length];

            if (this.keyCount === 0) {
                this.model += letter;
            } else {
                this.model = this.model.slice(0, -1) + letter;
            }

            this.lastKey = key;

            this.keyPressTimeout = setTimeout(() => {
                this.keyCount = -1;
                this.lastKey = null;
            }, 300);
        }
    });
}

[skol-pro]

And in case you want the lowercase before uppercase, just replace the keyMapping by:

private keyMapping = {
    2: ['a', 'b', 'c', 'A', 'B', 'C'],
    3: ['d', 'e', 'f', 'D', 'E', 'F'],
    4: ['g', 'h', 'i', 'G', 'H', 'I'],
    5: ['j', 'k', 'l', 'J', 'K', 'L'],
    6: ['m', 'n', 'o', 'M', 'N', 'O'],
    7: ['p', 'q', 'r', 's', 'P', 'Q', 'R', 'S'],
    8: ['t', 'u', 'v', 'T', 'U', 'V'],
    9: ['w', 'x', 'y', 'z', 'W', 'X', 'Y', 'Z']
};

[chaitanyas11]

its giving length error it as undefined

[chaitanyas11]

can't we do toggle of number keypad and alphabetic keypad with the help of shift button

[chaitanyas11]

as like this

[skol-pro]

Oups, I modified the line in my original comment.

const letter = this.keyMapping[key][this.keyCount % this.keyMapping[key].length];

Not sure to understand your two last comments.

[chaitanyas11]

As of now u developed this keypad

[chaitanyas11]

my doubt is that if we add extra button like

this button to above keyboard

[chaitanyas11]

then can we toggle from only numbers keypad to only alphabets keypad

that is possible with this,

[chaitanyas11]

Oups, I modified the line in my original comment.

const letter = this.keyMapping[key][this.keyCount % this.keyMapping[key].length];

Not sure to understand your two last comments.