Nathan
Any chance you could add a decimal point to that blank spot in the bottom left hand corner? That would be glorious.
Ionic Numeric Keyboard
Highly customizable numeric keyboard for your app
$10.00
Iclic Labs
Member since 2014
Details
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
- Works with iOS, Android and Windows Phone.
- Works great for passcode, SMS code validation, phone numbers, any numeric input in forms
- Easy to include in your existing app.
- The directive is very easy to use.
- The keyboard is highly customizable with just a few CSS lines.
- You can show/hide the keyboard easily.
- Compatible with your existing code.
- This component contains an easy to use directive. It comes with all 7 examples
- 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
- Copy the lib/ion-numeric-keyboard/ion-numeric-keyboard.js into your lib folder
- Update your index.html to include the lib/ion-numeric-keyboard/ion-numeric-keyboard.js file
- 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
- 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:
- Ionic Categories: Ionic v2.x/v3.x
- Ionic Passcode Square: Ionic v2.x/v3.x
- Ionic Passcode Flat: Ionic v2.x/v3.x
- Ionic Passcode Round: Ionic v2.x/v3.x
- Ionic Shrinking Header: Ionic v2.x/v3.x
- Ionic Material Sidemenu: Ionic v2.x/v3.x
- Ionic Walkthrough: Ionic v2.x/v3.x
- Ionic Contacts Inviter: Ionic v2.x/v3.x
- Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
- Ionic Profile Header: Ionic v2.x/v3.x
- Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
- Ionic Phone Number Validator: Ionic v1.x
- Ionic Cover Item: Ionic v1.x
- 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.
Iclic Labs
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
Just released a new version where you can fully customize the left and the right control keys.
Moritz
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
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
is there a way to try on our app and see if fits for us, if its working within our app?
Iclic Labs
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.
Iclic Labs
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
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
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.
Iclic Labs
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
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
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
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
Roger that! If you need help, ping me by email. (PS: if you guys love this plugin, please consider leaving a rating. Thanks :))
Nathan
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
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
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
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
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
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
@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
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
Hello Hubaokun, please email at icl1clabs@gmail.com so I can help you troubleshoot this issue. Cheers.
Sid Jain
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
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.
Eric Ong
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
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
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
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.
Bhaskar Hazarika
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
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
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
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
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
Does anybody tell me how I can show the keyboard when I click some element? Thank you in advance.
Pascal
Hi, Is your plugin working on Ionic 2 at the moment?
Iclic Labs
Yes, just waiting for the ionic 2 and angular2 to be slightly more stable. But I started worked on it.
Iclic Labs
The ionic v2 version has been released. Check out https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard
Sohail Bakhtiari
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?
Ylli Gashi
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
Iclic Labs
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
I did use readonly, but read only makes input untouchable. How would you expect that to happen ?
Eddie
Curious how you're selling this on ionic when ionic has a built-in numeric keyboard. 😂
Iclic Labs
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.
Kevin
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
Yuriy
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.
Alex Szilagyi
Does this version has the onClose() (method) like the v2 has?
Alex Szilagyi
@IclicLabs : has been some improvements as for onClose method ? beside the modifying the initial source code ?
2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV
i can't buy this plugin
Iclic Labs
I reached out to the ionic team to see what's happening. It is an issue with the marketplace itself.
Nuajan Dmn
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?
Les Toft
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.
Hendrik Sommer
Hi, does this work with angular input masks (ui money mask, https://assisrafael.github.io/angular-input-masks/) in combination with . or , seperator?
Hendrik Sommer
Hi, does this work with angular input masks (ui money mask, https://assisrafael.github.io/angular-input-masks/) in combination with . or , seperator?
Les Toft
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.
Nuajan Dmn
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?
2LINK MERCADOTECNIA Y TECNOLOGIA PARA TU NEGOCIO SAPI DE CV
i can't buy this plugin
Iclic Labs
I reached out to the ionic team to see what's happening. It is an issue with the marketplace itself.
Alex Szilagyi
Does this version has the onClose() (method) like the v2 has?
Alex Szilagyi
@IclicLabs : has been some improvements as for onClose method ? beside the modifying the initial source code ?
Yuriy
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.
Kevin
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
Eddie
Curious how you're selling this on ionic when ionic has a built-in numeric keyboard. 😂
Iclic Labs
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.
Ylli Gashi
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
Iclic Labs
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
I did use readonly, but read only makes input untouchable. How would you expect that to happen ?
Sohail Bakhtiari
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?
Pascal
Hi, Is your plugin working on Ionic 2 at the moment?
Iclic Labs
Yes, just waiting for the ionic 2 and angular2 to be slightly more stable. But I started worked on it.
Iclic Labs
The ionic v2 version has been released. Check out https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard
An Yong
Does anybody tell me how I can show the keyboard when I click some element? Thank you in advance.
AddWare Europe Ltd
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.
Rod Ferris
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
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
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
My app is in angularjs. But I am not using ionic framework. I am using Cordova. So I guess this will work..please reply.
Bhaskar Hazarika
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
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
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
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?
Iclic Labs
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
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
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
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
@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
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
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
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
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
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.
Nathan
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
Roger that! If you need help, ping me by email. (PS: if you guys love this plugin, please consider leaving a rating. Thanks :))
Rey
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
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
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
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.
Iclic Labs
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
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
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.
Iclic Labs
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
is there a way to try on our app and see if fits for us, if its working within our app?
Iclic Labs
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
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
Just released a new version where you can fully customize the left and the right control keys.
Nathan
Any chance you could add a decimal point to that blank spot in the bottom left hand corner? That would be glorious.
Iclic Labs
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
Very helpful and responsive developer. Plugin worked great.
Rey
saved me alot of time! nice work
Moritz
Great plugin. Developer even helped to implement additional feature on short notice. Thanks for that again!
Raghavendra Dabbir
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
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!
{{ rating.comment }}
{{ rating.comment }}
Xiaoyu Hou
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
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
Great plugin. Developer even helped to implement additional feature on short notice. Thanks for that again!
Rey
saved me alot of time! nice work
Nathan
Very helpful and responsive developer. Plugin worked great.