There are many apps that use a static keypad for entering numbers. This keypad isn’t one that appears when you put your cursor in an input, but one that is visible immediately when navigating to a page. I’ve included a screenshot. Is it possible to use ionic, css or cordova to setup a static (custom) keypad like this? If not, has anyone done this another way?
Thanks
One thing you could do is set up something like this in your code:
Template.transfer.onRendered(function() {
this.find('#id-of-input-element').focus();
});
I’m not sure how the support for this is nowadays, but this seems to suggest that you could also open the keyboard by running a command like cordova.plugins.Keyboard.show();. In fact, that link seems to suggest this is required for android.
Hope this helps! If you have a git repo, I could clone it and take a crack at helping out…
As for restricting it to a number keyboard, the keyboard should automatically change by changing the input type on the keyboard (see here). For example,
<input type="number" />
will result in a keyboard of just numbers. This
<input type="email" />
will result in the “email” keyboard (with an @ sign an such).
From the look of the keypads in different apps they are all using the same method to generate their keypads, just customizing borders and other css.
Using an input with the standard keyboard or number keyboard isn’t what they are doing. Skype does the same keypad for their phone number dialing. It’s almost like they have a button grid for this, not any kind of input.
I could do a git repo, but I’m trying to find a good starting point, since I see this style being used so often I don’t want to reinvent it.
Actually on iOS, using type="number" will display a keypad with numbers on top, and special characters below. It’s not ideal for input fields where you only need numbers.
When you only want numbers to display, use type="tel" instead.
Thanks. I think this kind of keypad would work for entering into an app from a lock screen, since the user’s navigation is fixed and they can’t touch out of the pin entry field. I think I need to look into a way to do the same with my form. Also, I started writing a keypad from scratch. I’ll post the source here when I’m further along with it.
The reason I started to pursue writing my own is that nothing really seems to fit what I’m trying to use it for. I want to allow users to enter an amount, with decimal places (only two). I wanted it to be smart enough to know when there were decimal places, both 1 and two of them and when there were none. And with this knowledge I wanted the input to shift the digits left if needed. I think I have all of that now, but it is pretty ugly. I’ll fix that sometime this week and post it.
Thanks. I’ll try this and see what it looks like. Maybe I can fix the keypad in by not allowing the user to navigate out of focus.
Haven’t tried something like this before, but I’d want to avoid showing the devices’ keyboard altogether.
What I’d try is keep adding digits to a hidden input element every time the user taps on a custom button and also display it’s formatted value in the custom widget. Not a Meteor specific solution, but a custom widget you can use whenever you want by calling a custom showKeyboard() function when you press a button or tap on the element of your choice