NativeScript Keyboard for Negative Number Input Field

Question

I am using Nativescript to create an Android and iOS App. As it is a kind of a calculator there are a lot of input fields for numbers. The numbers are decimal and can be negative. So I need a Keyboard with numbers, decimal point and minus sign (dash).

Therefore I use the keyboard type "number":

The keyboard that opens up in Android is fine. But the one in iOS has a lot of unnecessary fields like "(". iOS KeyBoard

As i found out there is no keyboard in iOS with the fields that I want: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType

But many people use the "DecimalPad" with a "inputAccessoryView" containing the minus sign to solve this problem. Is there a good was to solve this in NativeScript?

Cheers

score 1 · Accepted Answer · edited May 23 '17 at 12:23

You can use the native iOS API to create your custom keyboard. Here is an example that add a cancel button on your keypad and based on that concept you can fully customize your keyboard type.

page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
  <StackLayout>
    <TextField hint="" text="1425" id="tf-toolbar" />
  </StackLayout>
</Page>

page.js

function onLoaded(args) {
    var page = args.object;

    // if app.ios ...
    var myTextField = page.getViewById("tf-toolbar");

    // for the sake of example no target and actions are set (null)
    var barButtonItemOne = UIBarButtonItem.alloc().initWithTitleStyleTargetAction("Cancel", UIBarButtonItemStyle.UIBarButtonItemStyleBordered, null, null);
    var items = NSArray.arrayWithObject(barButtonItemOne);

    var toolbar = UIToolbar.alloc().initWithFrame({ origin: { x: 0, y: 0 }, size: { width: 320, height: 150 } });
    toolbar.barStyle = UIBarStyle.UIBarStyleBlackTranslucent;
    toolbar.items = items;

    toolbar.sizeToFit();

    var iosText = myTextField.ios;
    iosText.inputAccessoryView = toolbar;

}
exports.onLoaded = onLoaded;

The above example is based on the source code provided by @Luda here

More information on how to "translate" Objective-C to NativeScript you can find here

NativeScript Keyboard for Negative Number Input Field

1 Answers1

Linked