Ionic Numeric Keyboard

Ionic Numeric Keyboard

Highly customizable numeric keyboard for your app

$10.00

(5)
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
2
Size:
1mb
Ionic:
1.0 beta,1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
View ID:
4a734ddb
Released:
4 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
keyboard, number, numeric

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.

USING IONIC v2/v3? CHECK OUT http://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard


Plugin by icliclabs.com

Description

Ionic Numeric Keyboard is a gorgeous component allowing you to simulate a numeric keyboard without having to deal with a native (and painful) keyboard. The numeric keyboard is an easy-to-use directive similar to an ion-footer. You can easily customize the style or the content of each keys.

Test Before You Buy

You can test the app using Ionic View and enter the app id 4a734ddb.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Works great for passcode, SMS code validation, phone numbers, any numeric input in forms
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. The keyboard is highly customizable with just a few CSS lines.
  6. You can show/hide the keyboard easily.
  7. Compatible with your existing code.
  8. This component contains an easy to use directive. It comes with all 7 examples
  9. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the lib/ion-numeric-keyboard/ion-numeric-keyboard.js into your lib folder
  2. Update your index.html to include the lib/ion-numeric-keyboard/ion-numeric-keyboard.js file
  3. Update the app.js file and add dbaq.ionNumericKeyboard to the list of modules, i.e. angular.module('starter', ['ionic', 'dbaq.ionNumericKeyboard'])

That's all!

Usage

  1. in your view, add after the : . The options attribute is an object containing the function called when the user presses a key, the left control content (optional) and the right control content (optional).

That's all. Here is an example of a view:

<ion-view>

  <ion-header-bar class="bar-dark">
    <h1 class="title">Passcode</h1>
  </ion-header-bar>

  <ion-content overflow-scroll="true">
      ... your content goes here ...
  </ion-content>

  <!-- add the directive after the <ion-content> -->
  <ion-numeric-keyboard options="options"></ion-numeric-keyboard>

</ion-view>

Here is an example for your controller:

module.controller('PasscodeExampleController', ['$scope', function($scope) {

  $scope.number = '';

  $scope.options = {
    visible: true, // whether or not showing the keyboard, set to true to display the keyboard when entering the view 
    hideOnOutsideClick: false, // close the keyboard when clicking outside
    leftControl: '.',
    rightControl: '<i class="icon ion-close-round"></i></button>',
    onKeyPress: function(value, source) {
      if (source === 'LEFT_CONTROL') {
        if ($scope.number.indexOf('.') === -1) {
          $scope.number += value;
        }
      }
      else if (source === 'RIGHT_CONTROL') {
        $scope.number = $scope.number.substr(0, $scope.number.length - 1);
      }
      else if (source === 'NUMERIC_KEY') {
        $scope.number += value;
      }
    }
  }
}]);

leftControl and rightControl properties are optionals. If there are not defined, the button will be disable and not clickable.

This component is structured, easy to customize and integrate into your Ionic app, BUT feel free to email me if you need any help.

Customization

Customizing this component is really easy. Here is how to change the color:

/* style for each key*/
.ion-numeric-keyboard.white-keyboard .key {
    background-color: #fff;
    color: #5995DC;
    border-color: #eee;
}

/* style when a key is pressed */
.ion-numeric-keyboard.white-keyboard .key.activated {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .1);
    background-color: rgba(230, 230, 230, 0.5);
}

/* style for control keys, you can also use .left-control-key and .right-control-key */
.ion-numeric-keyboard.white-keyboard .key.control-key {
    background-color: #fafafa;
}

/* style for the top bar with the done button */
.ion-numeric-keyboard.white-keyboard .ion-numeric-keyboard-top-bar {
    background-color: #fafafa;
    border-top: 1px #eee solid;
    border-bottom: 1px #eee solid;
}
.ion-numeric-keyboard.white-keyboard .ion-numeric-keyboard-top-bar button {
    color: #5995DC;
}

You can apply a class to the ion-numeric-keyboard directive.

The style.css file comes with different example:

  • how to animate the keyboard
  • how to have a flat keyboard (no borders)
  • how to customize the theme

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Nathan

Nathan   ·   4 years ago

Any chance you could add a decimal point to that blank spot in the bottom left hand corner? That would be glorious.

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Nathan, let's follow up by email (email me at icl1clabs@gmail.com) to make sure I understood your needs correctly and I can make that work for everybody. Thanks.

Iclic Labs

Iclic Labs   ·   4 years ago

Just released a new version where you can fully customize the left and the right control keys.

Moritz

Moritz   ·   4 years ago

Hi, how can I test this plugin before buying? "You can test the app using Ionic View and enter the app id 4a734ddb." Don't know how to get the necessary files. Please advise. Thanks!

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Moritz, download the Ionic view app (http://view.ionic.io/) and then you can preview this component by entering the app id 4a734ddb. If you have more questions, the easiest thing is to followup by email at icl1clabs@gmail.com. Cheers.

Rafael Amorim

Rafael Amorim   ·   4 years ago

is there a way to try on our app and see if fits for us, if its working within our app?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Rafael, You can test the plugin via the ionic view app (id 4a734ddb). Or you can buy the plugin and if it does not fit your needs, I can potentially refund you. If you have more questions, the easiest thing is to followup by email at icl1clabs@gmail.com. Cheers.

Patrick Pereira

Patrick Pereira   ·   4 years ago

Will it work with ionic v2?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Patrick, When ionic 2 will reach a stable public beta version, I will update all my plugins. That should come very soon though. Also, if you get the plugin now, you will have access to all the future updates. If you have more questions, feel free to email at icl1clabs@gmail.com. Cheers.

Eray

Eray   ·   4 years ago

Hey, nice plugin. Is it possible to add a "accessory" bar on top of it for a "submit" button or next/previous input filed button?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Eray, Thanks for your comment. It is not possible yet to add a top bar with action buttons. I might consider doing it if more people are interested. If you have more questions, feel free to email at icl1clabs@gmail.com. Cheers.

song liu

song liu   ·   4 years ago

Hi, May you change the keyboard have both the number and the character?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Song liu, this keyboard is going to stay a numeric keyboard only. Adding characters is really complicated (locales, encoding, etc.). I believe you should use a native keyboard for this purpose. Cheers.

Rey

Rey   ·   4 years ago

Hello, love the keyboard! Thanks alot. Noticing on Android the keyboard is having issues with 1.2 ionic? Where the keys are stacking on each other. Are you noticing this? Will you be releasing a fix for 1.2 and ionic 2 going forward? Thanks :)

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Rey, thanks for the love :) can you please email at icl1clabs@gmail.com with more details please? I will support 1.2 and ionic 2 (once stable or in release candidate). Thanks.

Rey

Rey   ·   4 years ago

Actually just realised the issue is maybe not 1.2 specific but when I tried to muck around with a .button css style. Thanks anyway!!

Iclic Labs

Iclic Labs   ·   4 years ago

Roger that! If you need help, ping me by email. (PS: if you guys love this plugin, please consider leaving a rating. Thanks :))

Nathan

Nathan   ·   4 years ago

This is a great plugin, thanks! It would be nice if there was an option for a "done" button. This would just slide down the keyboard when you are done using it. Here's a mock up of what it would look like along with a more standard keyboard design http://i.imgur.com/cO31IrL.png

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Nathan, let's follow-up by email for your request, it seems reasonnable and doable.

Sydney Pollak

Sydney Pollak   ·   4 years ago

How to show the Keyboard only on focus of input area?

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Sydney, The numeric keyboard is a panel displayed only when a view is entered. Think about a passcode verification screen for instance. You cannot hide/show it on demand. Since it is a popular request, I am going to add a service to show/hide the keyboard from your controllers. I'll keep you posted. Feel free to email me at icl1clabs@gmail.com if you have more questions.

Iclic Labs

Iclic Labs   ·   4 years ago

Hi folks, I just released a major update of the plugin. You can now show/hide the keyboard (great for forms) and add a done button in the top bar. As usual, everything is highly customizable. If you have any questions or issues, email me at icl1clabs@gmail.com! Cheers guys!

Xiaoyu Hou

Xiaoyu Hou   ·   4 years ago

Just purchased the plugin. I use it exclusive on the form option. I saw the top button option with done. But can I also add top button with next and preview input field? Like the iOS default. If, could you provide an example with this plugin?

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Xiaoyu, Thank you for purchasing this plugin. Unfortunately, this plugin does not provide the ability to navigate to different inputs via a next or a previous button. If you have any other questions, feel free to email me at icl1clabs@gmail.com. Cheers.

Xiaoyu Hou

Xiaoyu Hou   ·   4 years ago

The plugin might be triggering a scroll view error? So after I open and close the input, I see a huge white gap at the bottom is generated. And I can not scroll back to top of my content. How can I solve this problem? View the problem/bug video here: https://youtu.be/KyTnNiJI-MA

Iclic Labs

Iclic Labs   ·   4 years ago

@Xiaoyu, Make sure to add `overflow-scroll="true"` to your ion-content like it is in the example. Also, for following support requests please email at icl1clabs@gmail.com. This comments section is definitely not the right place if you want me to help you set up the plugin. Thank you for your understanding.

hubaokun

hubaokun   ·   4 years ago

please help me,why I got erro "Error: angular.merge is not a function. (In 'angular.merge({}, defaultsOpts, $scope.options || {})', 'angular.merge' is undefined)"

Iclic Labs

Iclic Labs   ·   4 years ago

Hello Hubaokun, please email at icl1clabs@gmail.com so I can help you troubleshoot this issue. Cheers.

Sid Jain

Sid Jain   ·   4 years ago

Hello, I am running into the following issues with the plugin and hoping you can help out. 1) When entering data using the keyboard, I can't get the cursor to be present in the text box since adding a cursor brings back the default Apple keyboard over the plugin. 2) When I press a digit on the keyboard, the background and color of key changes but it sticks till another key is pressed, it doesn't automatically revert back to default. 3) When entering digits, the keyboard clicking sounds are not heard like while typing on Apple Keyboard Any help is greatly appreciated!

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Sid, keep in mind that this not a native keyboard, it is pure html/css/js 1) you can simulate the cursor like http://codepen.io/anon/pen/NNPNbJ 2) since it is a angularjs directive, you can customize the CSS and play with the pseudoclasses :active, :focus, etc. 3) it is not a native keyboard, no sound, but you can easily play a sound every time you press a key. for further assistance, please email me at icl1clabs@gmail.com, it is easier for me to answer you.

Sid Jain

Sid Jain   ·   4 years ago

Thank you, I will try that out and let you know if I run into further issues

Eric Ong

Eric Ong   ·   4 years ago

hello, i purchased the plugin and i had a question When the keypad is hidden and the field is at the bottom of the screen, and when i trigger the keypad to show, it will overlap the field and i cannot see what i was typing. is there an option to make the field i want to input just above the keypad?

Hoeksma

Hoeksma   ·   4 years ago

Dear all, I did a small code change to this excellent plugin allowing you to use also the normal keyboard, handy for browsers Just add the code below under the $scope.$watchCollection('options',......}); //When cordova is installed assume we don't have native keyboard attached if (!window.cordova) { var keyHandler = function(e){ if(angular.element($element).hasClass("ng-hide")) return; if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) { var key = (e.which || e.keyCode); if ((key>=48 && key<=59) || key==224 ) { //(0)1-9 || 0 on firefox $scope.opts.onKeyPress(String.fromCharCode(key),"NUMERIC_KEY"); e.preventDefault(); } else $scope.opts.onKeyPress(e,"KEYBOARD"); } } $document.on('keydown',keyHandler); $scope.$on('$destroy', function() { $document.off('keydown', keyHandler); }); }

Hoeksma

Hoeksma   ·   4 years ago

Hi small update on the code change for using browser keyboard. Now it also works when item has visible on, but is not visible //When cordova is installed assume we don't have native keyboard attached if (!window.cordova) { var visible = function (el) { if (el.length) el=el[0]; var rect = el.getBoundingClientRect(); var clw = (window.innerWidth || document.documentElement.clientWidth); var clh = (window.innerHeight || document.documentElement.clientHeight) ; // checks if element is fully visible //return (rect.top >= 0 && rect.bottom <= clh) && (rect.left >= 0 && rect.right <= clw) && // (rect.bottom-rect.top!=0 && rect.right-rect.left!=0); // checks if part of element is visible return (rect.left <= clw && 0 <= rect.right && rect.top <= clh && 0 <= rect.bottom) && (rect.bottom-rect.top!=0 && rect.right-rect.left!=0); }; var keyHandler = function(e){ var el = angular.element($element); visible(el); if(el.hasClass("ng-hide") || !$scope.opts.visible || !visible(el)){ return; } if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) { var key = (e.which || e.keyCode); if ((key>=48 && key<=59) || key==224 ) { //(0)1-9 || 0 on firefox $scope.opts.onKeyPress(String.fromCharCode(key),"NUMERIC_KEY"); $scope.$apply(); e.preventDefault(); } else { if ($scope.opts.onKeyPress(key,"KEYBOARD",e)) { $scope.$apply(); e.preventDefault(); } } } } $document.on('keydown',keyHandler); $scope.$on('$destroy', function() { $document.off('keydown', keyHandler); })

Bhaskar Hazarika

Bhaskar Hazarika   ·   4 years ago

Hi, Will this work for non-ionic apps ? I have a cordova app where I need a numeric keyboard with decimal. I am able to bring up for android but for ios it is not working.

Iclic Labs

Iclic Labs   ·   4 years ago

@Bhaskar, no, it only works with ionic/angularjs.

Bhaskar Hazarika

Bhaskar Hazarika   ·   4 years ago

My app is in angularjs. But I am not using ionic framework. I am using Cordova. So I guess this will work..please reply.

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin uses the ionic framework components ($ionicActionSheet, $ionicModal, $ionicLoading) + some CSS from the ionic CSS. This plugin is made for ionic. You can't use it without ionic. If you have any other questions, please email me at icl1clabs@gmail.com.

Rod Ferris

Rod Ferris   ·   4 years ago

Hi icl1c labs, We are having an issue in our ionic app. I have to reload the page then it works but if we come from one page to another it doesn't work. Do you know how can we re-initialize the keyboard? Thanks for your great work.

Rod Ferris

Rod Ferris   ·   4 years ago

I wanted to update my comment with the fact that icl1c labs helped us solve the issue quickly and it was the fault of another plugin (ionic slider). Thanks for the help.

AddWare Europe Ltd

AddWare Europe Ltd   ·   4 years ago

The plugin is great . We bought and we are using it with great satisfaction . A non-technical question: how can we have a receipt ? We paid with the credit card company and accounting wants an invoice or a receipt . Thank you.

An Yong

An Yong   ·   4 years ago

How can I show the keyboard when I click some div element?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

An Yong

An Yong   ·   4 years ago

Does anybody tell me how I can show the keyboard when I click some element? Thank you in advance.

Iclic Labs

Iclic Labs   ·   4 years ago

You can simply set `$scope.options.visible` to `true`

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron Lynch

Cameron Lynch   ·   4 years ago

Has this been tested on a lower Android phone (API 16)??

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin does not use any android APIs. It should work on any android versions.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pascal

Pascal   ·   4 years ago

Hi, Is your plugin working on Ionic 2 at the moment?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Pascal, no this plugin is not compatible with ionic 2 at the moment

Luis Cabrera

Luis Cabrera   ·   4 years ago

Are you planning on providing one for ionic 2?

Iclic Labs

Iclic Labs   ·   4 years ago

Yes, just waiting for the ionic 2 and angular2 to be slightly more stable. But I started worked on it.

Iclic Labs

Iclic Labs   ·   4 years ago

The ionic v2 version has been released. Check out https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sohail Bakhtiari

Sohail Bakhtiari   ·   4 years ago

I have a popup which asks for a number. How I can show it below the popup, like the native keyboard, and not inside the popup?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   4 years ago

Ionic 2 version released: https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Ylli Gashi

Ylli Gashi   ·   3 years ago

Hi I wanted to ask of how did you install this to your ionic app. I copied ion-numeric-keyboard.js and included it into index.html then added as dependecy on my app dbaq.ionNumericKeyboard' and added all neccesary code from 'decimal' route but the keyboard is still initiated as native for ios and android. Please let me know of any other requirements for its implementation. Thanks

  ·   3 years ago

I've got the same problem! Any help would be greatly appreciated!

Iclic Labs

Iclic Labs   ·   3 years ago

Hey guys, you need to add the "readonly" attribute on your input. That's the only existing way to prevent the native keyboard to open.

Ylli Gashi

Ylli Gashi   ·   3 years ago

I did use readonly, but read only makes input untouchable. How would you expect that to happen ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Eddie

Eddie   ·   3 years ago

Curious how you're selling this on ionic when ionic has a built-in numeric keyboard. 😂

Iclic Labs

Iclic Labs   ·   3 years ago

Hello Eddie, Ionic uses the native keyboard which is a mess to deal with since it resizes the whole webview. Also you can't customize it. With this plugin, you can define the keys, the colors, the background color, etc. Have a good day.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kevin

Kevin   ·   3 years ago

great keyboard! I have been using it for a while and have had no issues until I tried to put the keyboard on a modal. windows and android work fine, but on iOS the keyboard comes up and then immediately disappears. Have you seen or heard of this happening? Or should I maybe just not use it on the modal. iOS is the hardest of the phones for me to test since I have an automated build process. The other two I could look into a little more easily but they work perfectly fine. Right now this is ios9

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Yuriy

Yuriy   ·   3 years ago

I think you have a bug with hideOnOutsideClick option. I use ng-click to set `$scope.keyboard.visible` to true, but click outside of the keyboard overrides directive scope and makes further changes of $scope.keyboard.visible useless - keyboard won't appear anymore after click outside of it. Maybe I'm doing something wrong.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alex Szilagyi

Alex Szilagyi   ·   3 years ago

Does this version has the onClose() (method) like the v2 has?

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Alex, I followed up with you by email.

Alex Szilagyi

Alex Szilagyi   ·   3 years ago

@IclicLabs : has been some improvements as for onClose method ? beside the modifying the initial source code ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV

2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV   ·   3 years ago

i can't buy this plugin

Iclic Labs

Iclic Labs   ·   3 years ago

I reached out to the ionic team to see what's happening. It is an issue with the marketplace itself.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nuajan Dmn

Nuajan Dmn   ·   3 years ago

Hi! Great plugin! Just pirchased and having an issue on IOS (10.3.2); The keyboard is shown when specific divs are tapped but seems to be rendered in its last position and inmediately dissapears and plays sliding up animation. Sliding out proccess is perfect. I am having same experience on ionic view as well with the form Demo. Any ideas?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Les Toft

Les Toft   ·   3 years ago

Hey, We're trying to get decimal function on our app. Your code works well when I tested it by itself on ionic-view. But when I tried to implement it into our app it failed to load the number pad. Can you help us? We're almost done.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hendrik Sommer

Hendrik Sommer   ·   2 years ago

Hi, does this work with angular input masks (ui money mask, https://assisrafael.github.io/angular-input-masks/) in combination with . or , seperator?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hendrik Sommer

Hendrik Sommer   ·   2 years ago

Hi, does this work with angular input masks (ui money mask, https://assisrafael.github.io/angular-input-masks/) in combination with . or , seperator?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Les Toft

Les Toft   ·   3 years ago

Hey, We're trying to get decimal function on our app. Your code works well when I tested it by itself on ionic-view. But when I tried to implement it into our app it failed to load the number pad. Can you help us? We're almost done.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nuajan Dmn

Nuajan Dmn   ·   3 years ago

Hi! Great plugin! Just pirchased and having an issue on IOS (10.3.2); The keyboard is shown when specific divs are tapped but seems to be rendered in its last position and inmediately dissapears and plays sliding up animation. Sliding out proccess is perfect. I am having same experience on ionic view as well with the form Demo. Any ideas?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV

2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV   ·   3 years ago

i can't buy this plugin

Iclic Labs

Iclic Labs   ·   3 years ago

I reached out to the ionic team to see what's happening. It is an issue with the marketplace itself.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alex Szilagyi

Alex Szilagyi   ·   3 years ago

Does this version has the onClose() (method) like the v2 has?

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Alex, I followed up with you by email.

Alex Szilagyi

Alex Szilagyi   ·   3 years ago

@IclicLabs : has been some improvements as for onClose method ? beside the modifying the initial source code ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Yuriy

Yuriy   ·   3 years ago

I think you have a bug with hideOnOutsideClick option. I use ng-click to set `$scope.keyboard.visible` to true, but click outside of the keyboard overrides directive scope and makes further changes of $scope.keyboard.visible useless - keyboard won't appear anymore after click outside of it. Maybe I'm doing something wrong.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kevin

Kevin   ·   3 years ago

great keyboard! I have been using it for a while and have had no issues until I tried to put the keyboard on a modal. windows and android work fine, but on iOS the keyboard comes up and then immediately disappears. Have you seen or heard of this happening? Or should I maybe just not use it on the modal. iOS is the hardest of the phones for me to test since I have an automated build process. The other two I could look into a little more easily but they work perfectly fine. Right now this is ios9

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Eddie

Eddie   ·   3 years ago

Curious how you're selling this on ionic when ionic has a built-in numeric keyboard. 😂

Iclic Labs

Iclic Labs   ·   3 years ago

Hello Eddie, Ionic uses the native keyboard which is a mess to deal with since it resizes the whole webview. Also you can't customize it. With this plugin, you can define the keys, the colors, the background color, etc. Have a good day.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Ylli Gashi

Ylli Gashi   ·   3 years ago

Hi I wanted to ask of how did you install this to your ionic app. I copied ion-numeric-keyboard.js and included it into index.html then added as dependecy on my app dbaq.ionNumericKeyboard' and added all neccesary code from 'decimal' route but the keyboard is still initiated as native for ios and android. Please let me know of any other requirements for its implementation. Thanks

  ·   3 years ago

I've got the same problem! Any help would be greatly appreciated!

Iclic Labs

Iclic Labs   ·   3 years ago

Hey guys, you need to add the "readonly" attribute on your input. That's the only existing way to prevent the native keyboard to open.

Ylli Gashi

Ylli Gashi   ·   3 years ago

I did use readonly, but read only makes input untouchable. How would you expect that to happen ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   4 years ago

Ionic 2 version released: https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sohail Bakhtiari

Sohail Bakhtiari   ·   4 years ago

I have a popup which asks for a number. How I can show it below the popup, like the native keyboard, and not inside the popup?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pascal

Pascal   ·   4 years ago

Hi, Is your plugin working on Ionic 2 at the moment?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Pascal, no this plugin is not compatible with ionic 2 at the moment

Luis Cabrera

Luis Cabrera   ·   4 years ago

Are you planning on providing one for ionic 2?

Iclic Labs

Iclic Labs   ·   4 years ago

Yes, just waiting for the ionic 2 and angular2 to be slightly more stable. But I started worked on it.

Iclic Labs

Iclic Labs   ·   4 years ago

The ionic v2 version has been released. Check out https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron Lynch

Cameron Lynch   ·   4 years ago

Has this been tested on a lower Android phone (API 16)??

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin does not use any android APIs. It should work on any android versions.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

An Yong

An Yong   ·   4 years ago

Does anybody tell me how I can show the keyboard when I click some element? Thank you in advance.

Iclic Labs

Iclic Labs   ·   4 years ago

You can simply set `$scope.options.visible` to `true`

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

AddWare Europe Ltd

AddWare Europe Ltd   ·   4 years ago

The plugin is great . We bought and we are using it with great satisfaction . A non-technical question: how can we have a receipt ? We paid with the credit card company and accounting wants an invoice or a receipt . Thank you.

An Yong

An Yong   ·   4 years ago

How can I show the keyboard when I click some div element?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rod Ferris

Rod Ferris   ·   4 years ago

I wanted to update my comment with the fact that icl1c labs helped us solve the issue quickly and it was the fault of another plugin (ionic slider). Thanks for the help.

Rod Ferris

Rod Ferris   ·   4 years ago

Hi icl1c labs, We are having an issue in our ionic app. I have to reload the page then it works but if we come from one page to another it doesn't work. Do you know how can we re-initialize the keyboard? Thanks for your great work.

Iclic Labs

Iclic Labs   ·   4 years ago

This plugin uses the ionic framework components ($ionicActionSheet, $ionicModal, $ionicLoading) + some CSS from the ionic CSS. This plugin is made for ionic. You can't use it without ionic. If you have any other questions, please email me at icl1clabs@gmail.com.

Bhaskar Hazarika

Bhaskar Hazarika   ·   4 years ago

My app is in angularjs. But I am not using ionic framework. I am using Cordova. So I guess this will work..please reply.

Iclic Labs

Iclic Labs   ·   4 years ago

@Bhaskar, no, it only works with ionic/angularjs.

Bhaskar Hazarika

Bhaskar Hazarika   ·   4 years ago

Hi, Will this work for non-ionic apps ? I have a cordova app where I need a numeric keyboard with decimal. I am able to bring up for android but for ios it is not working.

Hoeksma

Hoeksma   ·   4 years ago

Hi small update on the code change for using browser keyboard. Now it also works when item has visible on, but is not visible //When cordova is installed assume we don't have native keyboard attached if (!window.cordova) { var visible = function (el) { if (el.length) el=el[0]; var rect = el.getBoundingClientRect(); var clw = (window.innerWidth || document.documentElement.clientWidth); var clh = (window.innerHeight || document.documentElement.clientHeight) ; // checks if element is fully visible //return (rect.top >= 0 && rect.bottom <= clh) && (rect.left >= 0 && rect.right <= clw) && // (rect.bottom-rect.top!=0 && rect.right-rect.left!=0); // checks if part of element is visible return (rect.left <= clw && 0 <= rect.right && rect.top <= clh && 0 <= rect.bottom) && (rect.bottom-rect.top!=0 && rect.right-rect.left!=0); }; var keyHandler = function(e){ var el = angular.element($element); visible(el); if(el.hasClass("ng-hide") || !$scope.opts.visible || !visible(el)){ return; } if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) { var key = (e.which || e.keyCode); if ((key>=48 && key<=59) || key==224 ) { //(0)1-9 || 0 on firefox $scope.opts.onKeyPress(String.fromCharCode(key),"NUMERIC_KEY"); $scope.$apply(); e.preventDefault(); } else { if ($scope.opts.onKeyPress(key,"KEYBOARD",e)) { $scope.$apply(); e.preventDefault(); } } } } $document.on('keydown',keyHandler); $scope.$on('$destroy', function() { $document.off('keydown', keyHandler); })

Hoeksma

Hoeksma   ·   4 years ago

Dear all, I did a small code change to this excellent plugin allowing you to use also the normal keyboard, handy for browsers Just add the code below under the $scope.$watchCollection('options',......}); //When cordova is installed assume we don't have native keyboard attached if (!window.cordova) { var keyHandler = function(e){ if(angular.element($element).hasClass("ng-hide")) return; if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) { var key = (e.which || e.keyCode); if ((key>=48 && key<=59) || key==224 ) { //(0)1-9 || 0 on firefox $scope.opts.onKeyPress(String.fromCharCode(key),"NUMERIC_KEY"); e.preventDefault(); } else $scope.opts.onKeyPress(e,"KEYBOARD"); } } $document.on('keydown',keyHandler); $scope.$on('$destroy', function() { $document.off('keydown', keyHandler); }); }

Eric Ong

Eric Ong   ·   4 years ago

hello, i purchased the plugin and i had a question When the keypad is hidden and the field is at the bottom of the screen, and when i trigger the keypad to show, it will overlap the field and i cannot see what i was typing. is there an option to make the field i want to input just above the keypad?

Sid Jain

Sid Jain   ·   4 years ago

Thank you, I will try that out and let you know if I run into further issues

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Sid, keep in mind that this not a native keyboard, it is pure html/css/js 1) you can simulate the cursor like http://codepen.io/anon/pen/NNPNbJ 2) since it is a angularjs directive, you can customize the CSS and play with the pseudoclasses :active, :focus, etc. 3) it is not a native keyboard, no sound, but you can easily play a sound every time you press a key. for further assistance, please email me at icl1clabs@gmail.com, it is easier for me to answer you.

Sid Jain

Sid Jain   ·   4 years ago

Hello, I am running into the following issues with the plugin and hoping you can help out. 1) When entering data using the keyboard, I can't get the cursor to be present in the text box since adding a cursor brings back the default Apple keyboard over the plugin. 2) When I press a digit on the keyboard, the background and color of key changes but it sticks till another key is pressed, it doesn't automatically revert back to default. 3) When entering digits, the keyboard clicking sounds are not heard like while typing on Apple Keyboard Any help is greatly appreciated!

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Nathan, let's follow up by email (email me at icl1clabs@gmail.com) to make sure I understood your needs correctly and I can make that work for everybody. Thanks.

hubaokun

hubaokun   ·   4 years ago

please help me,why I got erro "Error: angular.merge is not a function. (In 'angular.merge({}, defaultsOpts, $scope.options || {})', 'angular.merge' is undefined)"

Iclic Labs

Iclic Labs   ·   4 years ago

@Xiaoyu, Make sure to add `overflow-scroll="true"` to your ion-content like it is in the example. Also, for following support requests please email at icl1clabs@gmail.com. This comments section is definitely not the right place if you want me to help you set up the plugin. Thank you for your understanding.

Xiaoyu Hou

Xiaoyu Hou   ·   4 years ago

The plugin might be triggering a scroll view error? So after I open and close the input, I see a huge white gap at the bottom is generated. And I can not scroll back to top of my content. How can I solve this problem? View the problem/bug video here: https://youtu.be/KyTnNiJI-MA

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Xiaoyu, Thank you for purchasing this plugin. Unfortunately, this plugin does not provide the ability to navigate to different inputs via a next or a previous button. If you have any other questions, feel free to email me at icl1clabs@gmail.com. Cheers.

Xiaoyu Hou

Xiaoyu Hou   ·   4 years ago

Just purchased the plugin. I use it exclusive on the form option. I saw the top button option with done. But can I also add top button with next and preview input field? Like the iOS default. If, could you provide an example with this plugin?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi folks, I just released a major update of the plugin. You can now show/hide the keyboard (great for forms) and add a done button in the top bar. As usual, everything is highly customizable. If you have any questions or issues, email me at icl1clabs@gmail.com! Cheers guys!

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Sydney, The numeric keyboard is a panel displayed only when a view is entered. Think about a passcode verification screen for instance. You cannot hide/show it on demand. Since it is a popular request, I am going to add a service to show/hide the keyboard from your controllers. I'll keep you posted. Feel free to email me at icl1clabs@gmail.com if you have more questions.

Sydney Pollak

Sydney Pollak   ·   4 years ago

How to show the Keyboard only on focus of input area?

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Nathan, let's follow-up by email for your request, it seems reasonnable and doable.

Nathan

Nathan   ·   4 years ago

This is a great plugin, thanks! It would be nice if there was an option for a "done" button. This would just slide down the keyboard when you are done using it. Here's a mock up of what it would look like along with a more standard keyboard design http://i.imgur.com/cO31IrL.png

Iclic Labs

Iclic Labs   ·   4 years ago

Roger that! If you need help, ping me by email. (PS: if you guys love this plugin, please consider leaving a rating. Thanks :))

Rey

Rey   ·   4 years ago

Actually just realised the issue is maybe not 1.2 specific but when I tried to muck around with a .button css style. Thanks anyway!!

Iclic Labs

Iclic Labs   ·   4 years ago

Hey Rey, thanks for the love :) can you please email at icl1clabs@gmail.com with more details please? I will support 1.2 and ionic 2 (once stable or in release candidate). Thanks.

Rey

Rey   ·   4 years ago

Hello, love the keyboard! Thanks alot. Noticing on Android the keyboard is having issues with 1.2 ionic? Where the keys are stacking on each other. Are you noticing this? Will you be releasing a fix for 1.2 and ionic 2 going forward? Thanks :)

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Song liu, this keyboard is going to stay a numeric keyboard only. Adding characters is really complicated (locales, encoding, etc.). I believe you should use a native keyboard for this purpose. Cheers.

song liu

song liu   ·   4 years ago

Hi, May you change the keyboard have both the number and the character?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Eray, Thanks for your comment. It is not possible yet to add a top bar with action buttons. I might consider doing it if more people are interested. If you have more questions, feel free to email at icl1clabs@gmail.com. Cheers.

Eray

Eray   ·   4 years ago

Hey, nice plugin. Is it possible to add a "accessory" bar on top of it for a "submit" button or next/previous input filed button?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Patrick, When ionic 2 will reach a stable public beta version, I will update all my plugins. That should come very soon though. Also, if you get the plugin now, you will have access to all the future updates. If you have more questions, feel free to email at icl1clabs@gmail.com. Cheers.

Patrick Pereira

Patrick Pereira   ·   4 years ago

Will it work with ionic v2?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Rafael, You can test the plugin via the ionic view app (id 4a734ddb). Or you can buy the plugin and if it does not fit your needs, I can potentially refund you. If you have more questions, the easiest thing is to followup by email at icl1clabs@gmail.com. Cheers.

Rafael Amorim

Rafael Amorim   ·   4 years ago

is there a way to try on our app and see if fits for us, if its working within our app?

Iclic Labs

Iclic Labs   ·   4 years ago

Hi Moritz, download the Ionic view app (http://view.ionic.io/) and then you can preview this component by entering the app id 4a734ddb. If you have more questions, the easiest thing is to followup by email at icl1clabs@gmail.com. Cheers.

Moritz

Moritz   ·   4 years ago

Hi, how can I test this plugin before buying? "You can test the app using Ionic View and enter the app id 4a734ddb." Don't know how to get the necessary files. Please advise. Thanks!

Iclic Labs

Iclic Labs   ·   4 years ago

Just released a new version where you can fully customize the left and the right control keys.

Nathan

Nathan   ·   4 years ago

Any chance you could add a decimal point to that blank spot in the bottom left hand corner? That would be glorious.

Iclic Labs

Iclic Labs   ·   4 years ago

Hello Hubaokun, please email at icl1clabs@gmail.com so I can help you troubleshoot this issue. Cheers.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

Nathan   ·     ·   4 years ago

Very helpful and responsive developer. Plugin worked great.

Rey   ·     ·   4 years ago

saved me alot of time! nice work

Moritz   ·     ·   4 years ago

Great plugin. Developer even helped to implement additional feature on short notice. Thanks for that again!

Raghavendra Dabbir   ·     ·   4 years ago

FANTASTIC Plugin - very easy to use and really rocks my day. Thanks a lot for all the effort, and specially for responding to all my queries. Great work.

Xiaoyu Hou   ·     ·   4 years ago

Support is great! Code quality is great as well. Very easy to use and I am super happy with my purchase. Keep up the good works!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Xiaoyu Hou    ·     ·   4 years ago

Support is great! Code quality is great as well. Very easy to use and I am super happy with my purchase. Keep up the good works!

Raghavendra Dabbir    ·     ·   4 years ago

FANTASTIC Plugin - very easy to use and really rocks my day. Thanks a lot for all the effort, and specially for responding to all my queries. Great work.

Moritz    ·     ·   4 years ago

Great plugin. Developer even helped to implement additional feature on short notice. Thanks for that again!

Rey    ·     ·   4 years ago

saved me alot of time! nice work

Nathan    ·     ·   4 years ago

Very helpful and responsive developer. Plugin worked great.