# NativeScript Numeric Keyboard [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Twitter Follow][twitter-image]][twitter-url] [build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-numeric-keyboard.svg?branch=master [build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-numeric-keyboard [npm-image]:http://img.shields.io/npm/v/nativescript-numeric-keyboard.svg [npm-url]:https://npmjs.org/package/nativescript-numeric-keyboard [downloads-image]:http://img.shields.io/npm/dm/nativescript-numeric-keyboard.svg [twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social&label=Follow%20me [twitter-url]:https://twitter.com/eddyverbruggen For iOS. Falls back to the best platform-provided numeric keyboard on Android. Note that the iPad UI looks a bit sleeker than shown in the screenshot below.

> BREAKING CHANGE in plugin version 4.0.0: we used to extend a `TextView`, now it's a `TextField`, because I finally hacked my way around a problem that prevented a TextField from emitting a `textChange` event. Note that unless you use the `decorate()` function this will not affect you (bar some now-fixed UI glitches). ## Installation From the command prompt go to your app's root folder and execute: #### Since NativeScript 7 ``` tns plugin add nativescript-numeric-keyboard ``` #### Before NativeScript 7 ``` tns plugin add nativescript-numeric-keyboard@4 ``` > mind the `@4` on the end, because since plugin version 5 we require NativeScript 7. ## Demo app Check out [the demo](demo) to play with the keyboard. You can run it by typing `npm run demo.iphone` / `npm run demo.ipad` at the root of the project. ## How it works This plugin wraps a [native keyboard library](https://cocoapods.org/?q=MMNumberKeyboard) and extends a regular [NativeScript TextField](https://docs.nativescript.org/cookbook/ui/text-field). You can set any property you'd normally set on this widget (`class`, `text`, etc) and a few plugin-specific properties as well. You can either define the keyboard in XML or in code - use whichever tickles your fancy. ## Screenshot-driven documentation After adding the plugin you can add a namespace to your view (using `NumKey` below) and use the `NumericKeyboardView` tag to render a TextField powered by this plugin. ```xml ``` For comparison sake we kick off with the default appearance of a `TextField` and then showcase the various properties this plugin exposes: | Appearance | Declaration | | --- | --- | |

| `` | |

| `` | |

| `` | |

| `` | |

| `` | |

| `` | |

| `` | |

| `` | ### iPad appearance It's similar (although a bit cleaner than in these screenshots), except for some padding on both sides of the keyboard: | Appearance | Declaration | | --- | --- | |

| `` | |

| `` | ## Usage with Vue Open `main.ts` (or `.js`) and add this: ```typescript Vue.registerElement('NumericKeyboard', () => require('nativescript-numeric-keyboard').NumericKeyboardView); ``` Check [this `registerElement` example](https://github.com/EddyVerbruggen/footplr/blob/3cea34a97a11726d6bd23252b79808ea35bb05ee/app/main.ts#L16), and [this usage example](https://github.com/EddyVerbruggen/footplr/blob/3cea34a97a11726d6bd23252b79808ea35bb05ee/app/pages/home/components/measurements/measurement-entry/exercise/components/NumberInput.vue#L2). ## Usage with Angular Open `app.module.ts` and add: ```typescript import { registerElement } from "nativescript-angular"; registerElement("NumericKeyboard", () => require("nativescript-numeric-keyboard").NumericKeyboardView); ``` For the views you can take a look at the examples above and just replace `NumKey:NumericKeyboardView` by `NumericKeyboard `: ```html ``` ## Programmatic usage Say you have a plain old `TextField` in your view: ```html ``` Now you can enhance the `TextField` with this plugin by doing fi. this in the `pageLoaded` event you've defined in the `` tag above: ```typescript import { NumericKeyboard } from "nativescript-numeric-keyboard"; import { Color } from "tns-core-modules/color"; export function pageLoaded(args: observable.EventData) { const page = args.object; const textField = page.getViewById("myTextField"); // or even textField.ios // this is an example with all possible properties, not that they make sense combined :) new NumericKeyboard().decorate({ textField: textField, returnKeyTitle: "Go!", locale: "en_US", // or "nl_NL", or any valid locale really (to define the decimal char) noReturnKey: true, noDecimals: true, noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9 returnKeyButtonBackgroundColor: new Color("red"), // optional, set this to change the (default) blue color of the 'return' key onReturnKeyPressed: (): boolean => { // Your code here return true; // Return true to hide/collapse the keyboard, use false to keep the keyboard in place. } }); } ``` Note that on Android you'll just get a numeric keyboard as usual (since we specified `keyboardType="number"`).

nativescript-numeric-keyboard

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past