:1234: Replace the meh default number/phone keyboard with this stylish one

License: Other

TypeScript 90.62% Ruby 1.02% Shell 8.35%

nativescript keyboard numeric-keyboard numeric

nativescript-numeric-keyboard's People

Contributors

Stargazers

Watchers

Forkers

mdassen alexandrehenzen ainal777 akempes roman86 sy7777 figmentpos flipperlite

nativescript-numeric-keyboard's Issues

App doesn't build

Hi Eddy,

I'm getting the following error when I build the app

ERROR in node_modules/nativescript-numeric-keyboard/numeric-keyboard.ios.d.ts(28,79): error TS2304: Cannot find name 'MMNumberKeyboardDelegate'.
node_modules/nativescript-numeric-keyboard/numeric-keyboard.ios.d.ts(30,20): error TS2304: Cannot find name 'MMNumberKeyboardDelegate'.
node_modules/nativescript-numeric-keyboard/numeric-keyboard.ios.d.ts(38,42): error TS2304: Cannot find name 'MMNumberKeyboard'.

Everything was working good, but I needed to do "npm i" then I started to get this error

After looking more into it, it seems like this issue not exist on 4.2.2 version, and it somehow connected with the pod file

Thanks

Error building for Android with AOT checked.

Hi there, I am trying to compile my app using Webpack, Uglify, Snapshot and AOT for Android and it fails when its trying to compile the project.
This is the error message:

'NSNUMKEY_DIRECTIVES' is not initialized at nativescript-numeric-keyboard/angular/index.ts(1,14)

If I uncheck AOT it works.

Is it compatible with AOT for Android?

Thanks!

Remove the peerdependency on tns-core-modules (~3.4.0)

No need.

propertyChange does not work for textChanges

in the normal textfields, it is possible to use propertiesChange or ngModelChange to apply a function for every keyboardbuttonpress the user applies (set in the html).
example code:
<TextField #mytextField
keyboardType="number"
[text]="myText"
(propertyChange)="onTextChange($event)"
hint="test field">
For specific constraints, I need this functionality. My constraints are working perfectly until I add the numerickeyboard with decorate.
Is it possible to get this working again?
By The way, this is only when updateTextTrigger is set to textChange. If it is set to focusLost, it actually fires the function declared in propertyChange as wished.

App crashes when running it in release mode using this plugin (nativescript-numeric-keyboard) in IOS

JS ERROR ReferenceError: Can't find variable: MMNumberKeyboardDelegate
App crashes when in release mode using this plugin, and the above error is encountered when running through xcode.

Register element for use with {N} Vuejs

Request for documentation on how to register element using vuejs.

Any way of using this on a RadDataForm?

noDecimals="true"not working in vue

          <GridLayout col="0" rows="auto" columns="auto,*" verticalAlignment="center">
              <Label col="0" row="0" text="SL:" verticalAlignment="center"/>
              <!-- <TextField col="1" row="0" v-model="sl" class="boxsl" /> -->
              <NumericKeyboard col="1" row="0" noDecimals="true" noReturnKey="true" class="boxsl"></NumericKeyboard>
          </GridLayout>

im set noDecimals="true" or :noDecimals="true" but it not working and noReturnKey="true" too

Make iPad layout look more like iPhone

No rounded corners, less of a gap, bigger buttons.

iOS safe areas for iPhone X and newer

The keyboard is bit too close to the bottom, let's honor the safe area insets.

Angular [text] binding not working

It seems like binding the text property in angular doesn't work.

My app.module.ts:

import { registerElement } from "nativescript-angular";
registerElement("NumericKeyboard", () => require("nativescript-numeric-keyboard").NumericKeyboardView);

My html file where I use the keyboard:

<Label [text]="price"></Label>
<NumericKeyboard [text]="price"></NumericKeyboard>

The price property isn't updated in the <Label>. If I were to have a normal <TextField> the binding works.

Angular file missing in 2.1.2

event.value on @textChange seems to be late

Hello,

I'm using 5.0.0 with NativeScript 7 (Vue) and Javascript Core.
When I update a NumericKeyboard field, the event triggers fine but the value takes the oldValue on a real Device. It works fine on the simulator.
On this example, the value in the confirm button (below) is the same as the event.value for @textchange

Edit : It seems to be triggered more easily when editing a value from the middle.

Any idea ?

<NumericKeyboard
              :text="amountFormatted"
              @textChange="updateAmount($event)"
              :locale=getLocaleKeyBoard  />

"dependencies": {
    "@nativescript/core": "^7.0.13",
    "@nativescript/firebase": "^11.1.2",
    "@nativescript/iqkeyboardmanager": "^2.0.0",
    "@nativescript/theme": "^2.5.0",
    "@nativescript/unit-test-runner": "^1.0.2",
    "@nstudio/nativescript-filterable-listpicker": "^3.0.0",
    "@nstudio/nativescript-pulltorefresh": "^3.0.1",
    "accounting": "^0.4.1",
    "axios": "^0.20.0",
    "i18n-postal-address": "^0.2.0",
    "nativescript-appversion": "^1.4.4",
    "nativescript-barcodescanner": "file:app/libs/nativescript-barcodescanner",
    "nativescript-fingerprint-auth": "^7.0.2",
    "nativescript-localize": "^4.2.2",
    "nativescript-numeric-keyboard": "^5.0.0",
    "nativescript-permissions": "^1.3.11",
    "nativescript-print-star": "file:app/libs/nativescript-print-star",
    "nativescript-ui-listview": "^9.0.4",
    "nativescript-vue": "^2.8.3",
    "vuex": "^3.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.8",
    "@babel/preset-env": "^7.12.7",
    "@nativescript/ios": "6.5.3",
    "@nativescript/types": "^7.0.4",
    "@nativescript/webpack": "^3.0.8",
    "@types/node": "^12.19.6",
    "@types/qunit": "^2.9.6",
    "babel-loader": "^8.1.0",
    "karma": "5.2.3",
    "karma-nativescript-launcher": "0.4.0",
    "karma-qunit": "4.1.1",
    "karma-webpack": "3.0.5",
    "nativescript-vue-template-compiler": "^2.8.3",
    "nativescript-worker-loader": "^0.12.1",
    "node-sass": "^4.14.1",
    "qunit": "2.12.0",
    "typescript": "^3.4.3",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5"
  },

Is returnPress available?

The returnPress event is not fired when I press the blue "Done" button. Is it possible to make it work?

Cleanup references may fail when using 'decorate'

When dynamically enhancing a widget there may be a crash because the handler can't be removed. See the code I'll push for details.

App is not responding and is paused on splash screen IOS

JS ERROR TypeError: undefined is not a constructor (evaluating 'new view_1.Property({

Module 'nativescript-numeric-keyboard' not found for element 'nativescript-numeric-keyboard:NumericKeyboardView'

Hello Eddy,

Thank you for creating this plugin, very useful.

This morning I started getting the following error:

Module 'nativescript-numeric-keyboard' not found for element 'nativescript-numeric-keyboard:NumericKeyboardView'.
> undefined is not a constructor (evaluating 'new _nativescript_core__WEBPACK_IMPORTED_MODULE_0__["Property"]({
name: "returnKeyTitle",
defaultValue: "Done"
})')

I am defining the plugin in the XML file only as:

<Page xmlns="http://www.nativescript.org/tns.xsd" 
    xmlns:rc="nativescript-ui-calendar" 
    xmlns:NK="nativescript-numeric-keyboard" loaded="onLoaded" actionBarHidden="true">
    <ScrollView>
        <DockLayout>
            <StackLayout dock="top" backgroundColor="#f2f2f2" padding="15">
                ...
                   <StackLayout col="0">
                        <Label text="Type other amount" class="lbl"/>
                        <Label id="lblAmount" text="{{ amount }}" class="display" />
                        <NK:NumericKeyboardView id="ht" opacity="0" />
                    </StackLayout>

                ...
            </StackLayout>
        </DockLayout>
    </ScrollView>
</Page>

Here is my package.json:

{
  "name": "",
  "version": "4.5.0",
  "description": "",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "",
    "tns-android": {
      "version": "6.5.3"
    },
    "tns-ios": {
      "version": "6.5.3"
    }
  },
  "dependencies": {
    "@nstudio/nativescript-loading-indicator": "^3.0.1",
    "@types/node": "^12.12.7",
    "moment": "2.20.1",
    "moment-timezone": "0.5.14",
    "nativescript-appversion": "1.4.1",
    "nativescript-email": "1.5.1",
    "nativescript-exit": "1.0.1",
    "nativescript-fingerprint-auth": "6.0.3",
    "nativescript-image-zoom": "^3.0.3",
    "nativescript-masked-text-field": "4.0.3",
    "nativescript-numeric-keyboard": "^5.0.0",
    "nativescript-pdf-view": "2.0.1",
    "nativescript-phone": "1.4.0",
    "nativescript-plugin-firebase": "10.2.0",
    "nativescript-theme-core": "2.0.24",
    "nativescript-ui-calendar": "5.0.0",
    "nativescript-zendesk-sdk": "^0.2.0",
    "tns-core-modules": "6.4.0"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "1.3.0",
    "tns-platform-declarations": "6.2.1",
    "typescript": "3.4.5"
  },
  "author": ""
}

Any idea what could be causing this?

Thanks.

Question: Angular + Nativescript FormControlName and ReactiveForms Value not binding.

I'm trying to bind a form control field with this keyboard however the field displays normally but doesn't bind the value. What am I doing wrong?


                  <NumericKeyboard 
                    class="text-field" 
                    hint="Form Control Field" 
                    formControlName="formControlField"
                    keyboardType="email"
                    autocorrect="false"
                    returnKeyType="next"
                    noDecimals="false"
                  >

console.log(this.form.get('formControlField').value) doesn't change

Support programmatic usage of raw types (fi. for SearchBar)

For instance when a searchBar is grabbed from the UI it doesn't have a keyboardtype property, nor a TextField property. By traversing the subviews you can grab the underlying TextField (although this example is a bit brittle) and pass that to the plugin:

      let textFieldContainerSubviews = this.searchBar.nativeElement.ios.subviews.objectAtIndex(0).subviews;
      if (textFieldContainerSubviews.count > 1) {
        new NumericKeyboard().decorate({
          textView: textFieldContainerSubviews.objectAtIndex(1),
          locale: "nl_NL",
          noReturnKey: true,
          noDecimals: true
        });
      }

Question: Does this support a minus symbol?

I need a numeric keyboard but with ability to add negative numbers.

Can't change returnKeyButtonBackgroundColor value when Keyboard is open.

Hello, we are using Nativescript-vue.
We would like use a new color when text entered by user is valid.

<NumericKeyboard :returnKeyButtonBackgroundColor="color"> </NumericKeyboard>

//initial
this.color = "black"

//after validation
this.color = "green"

Could you please help us about this ?
Thank you Eddy, all your plugins are usefull for us :)

App crashes when running it in release mode using this plugin (nativescript-numeric-keyboard) in IOS

JS ERROR ReferenceError: Can't find variable: MMNumberKeyboardDelegate
App crashes when in release mode using this plugin, and the above error is encountered when running through xcode.

maxLength textfield is not working in ios.

<NK:NumericKeyboardView id="totalAmount" hint="0.00" keyboardType="number" maxLength="6"/>

Package.Json://
"tns-core-modules": "^3.4.1"

Button color

First off, great plugin. Thanks for taking the time to make it.
This is more of a question than an issue.

Is there a way to change the background color of the Done button?

Thank you.

Nativescript 5.0 crash

Hi, I have upgraded to Nativescript 5.0 and I get this:
TypeError: undefined is not an object (evaluating 'this.nativeView.inputView = this._keyboard')

I have edited in node_modules/nativescript-numeric-keyboard/numeric-keyboard.ios.js line 107:

if(this.nativeView) {
        this.nativeView.inputView = this._keyboard;
 }

I no longer get the error, but I have the normal keyboard.

Nativescript Vue - iOS - TextField is not assignable to type

Below is the error I'm facing:

TS2322: Type 'import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript/core/ui/text-field/text-field").TextField' is not assignable to type 'import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/ui/text-field/text-field").TextField'.
The types of 'formattedText.spans.on' are incompatible between these types.
Type '{ (eventNames: string, callback: (data: import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript/core/data/observable/observable").EventData) => void, thisArg?: any): any; (event: "change", callback: (args: import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript...' is not assignable to type '{ (eventNames: string, callback: (data: import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/data/observable/observable").EventData) => void, thisArg?: any): any; (event: "change", callback: (args: import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/data/observable-arra...'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'args' and 'data' are incompatible.
Type 'EventData' is missing the following properties from type 'ChangedData<Span>': action, index, removed, addedCount

Here is my code snippet:

<StackLayout class="my-class" orientation="vertical" @loaded="onWrapperLoaded">
...

      <TextField
        id="myTextField"
        :class="{ 'empty-styling': isEmpty }"
        :editable="true"
        v-model.trim="textFieldValue"
        textAlignment="right"
        android:inputType="number"
        keyboardType="phone"
        @returnPress="$emit('returnPress')"
        @textChange="textChange"
        @focus="textChange($event, 'focus')"
        :hint="Enter Here"
      />

...

import { EventData } from 'tns-core-modules/data/observable';
import { TextField } from '@nativescript/core';
import { View } from 'tns-core-modules/ui/core/view';
import { NumericKeyboard } from 'nativescript-numeric-keyboard';

...

  private onWrapperLoaded(args: EventData): void {
    const textField = (args.object as View).page.getViewById('myTextField') as TextField;
    new NumericKeyboard().decorate({
      textField: textField,
      returnKeyTitle: 'OK',
      locale: 'en_US',
      noDecimals: false,
      noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9
      onReturnKeyPressed: (): boolean => {
        return true; // Return true to hide/collapse the keyboard, use false to keep the keyboard in place.
      },
    });
  }

Here is my environment:

iOS
14.5

node -v
14.15.0

npm -v
6.14.8

tns -v
8.0.1

nativescript -v
8.0.1

Configurable button bar on iPad

Add an option to remove it entirely.

Text always left align when input done

I have set the text-align to right, initial is fine, but when input is finish and lost focus, the text become left aligned. this is only iOS behavior, android has no problem.

ngModel directive does not work

I'm trying to utilize this plugin in NativeScript 3.0 using Angular4, but I keep getting the following errors when using the ngModel directive:

JS: ERROR Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute
JS: Error: No value accessor for form control with unspecified name attribute

My code looks like this:
<NumericKeyboard (returnPress)="checkCode($event)" [(ngModel)]="code" hint="{{'ticket_code'|translate}}" autocorrect="false" autocapitalizationType="none" keyboardType="number" returnKeyType="go"></NumericKeyboard>

Is it even supposed to work? Without the ngModel directive the errors disappear.

multiple textfields: onReturnKeyPressed callback and textChange event work only for last created instance

function onTextChange(args: EventData) {
    const t = <TextField>args.object;
    console.log("text entered: " + t.text);
}

function setupNumInput(inp: TextField) {

    inp.on("textChange", onTextChange);
    // EVENTS DON'T WORK WITH MULTIPLE INPUTS! ONLY THE LAST ONE IS WORKING!
    new NumericKeyboard().decorate({
        textField: inp,
        returnKeyTitle: "OK",
        returnKeyButtonBackgroundColor: new Color("#4b7786"),
        locale: "en_US", // or "nl_NL", or any valid locale really (to define the decimal char)
        noDecimals: false,
        noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9
        onReturnKeyPressed() {
            console.log("RETURN!", inp);

            return true;
        }
    });
    console.log("setup", inp);
}

if I call setupNumInput on multiple textfields - I see console output that all of them were successfully initialized. But other console output ("RETURN!" and "text entered") is only works for the last (in order of initialization) text field. Other text fields look fine, but no events nor callbacks being invoked.

I've already found a solution, will prepare a pull request shortly

NativeScript 7 compatibility

editable is not working on Android

Angular 9.1
tns-core-module: 6.5.0
@nativescript/core: 6.5.15

I tried to add editable on NumericKeyboard, when test becomes true, I can focus on it but can't edit it. Then I tried add a TextField with the same settings is working.

[editable] = "test"
or
editable = "{{ test }}"

<NumericKeyboard [(ngModel)]="confirmPassword" hint="{{'message.confirm-password'|L}}" class="password"
            keyboardType="number"
            returnKeyType="done" [editable]="test"
            maxLength="4" secure="true" noDecimals="true"></NumericKeyboard>

Allow no more than 1 decimal sep

It doesn't make sense to allow more than 1 decimal sep (think currency). Android seems to do this automatically already (need to confirm this assumption), on iOS multiple comma's/dots (depending on the locale) are allowed.

Decimal separator issues

1 Still allows multiple decimal separators when none exist yet.
2 Does not allow any decimal separators when the existing decimal separator is deleted, while this should be possible.

Using returnPress event on html attribute (Angular)

How do I add event using html attribute? I used (returnPress) is not wokring, also onReturnKeyPressed or returnKeyPressed.

tns-core-modules v5.3.1
nativescript-numeric-keyboard v4.2.3
nativescript-angular v7.2.3

<NumericKeyboard col="1" class="no-border text-right font-size-14" returnKeyType='done' (returnPress)="goEstimate($event)" [(ngModel)]="stockInfo.closePrice" maxLength="10"></NumericKeyboard>

And I tried to add value accessor for numeric keyboard for someone like to use ngModel tag.

import { Directive, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

import { TextValueAccessor } from 'nativescript-angular/forms/value-accessors/text-value-accessor';

const MASKED_TEXT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumericKeyboardValueAccessor),
multi: true
};

@Directive({
// tslint:disable-next-line:directive-selector
selector: 'NumericKeyboard[ngModel], NumericKeyboard[formControlName], NumericKeyboard[formControl]',
providers: [MASKED_TEXT_VALUE_ACCESSOR],
host: {
    '(blur)': 'onTouched()',
    '(textChange)': 'onChange($event.value)'
},
})
// tslint:disable-next-line:directive-class-suffix
export class NumericKeyboardValueAccessor extends TextValueAccessor {
}

'textChange' and 'returnPress' events not working

Hello,

I am implementing NumericKeyboard in native script angular, and its textChange event not giving proper value and returnPress event is also not working.

Please help with this issue as soon as possible as I have to implement in application.

Please look into this.