Ability to customize TextInput

[TJ]

Hey all,

Question: are these the only options currently available to customize TextInputs out of the box (https://github.com/NativeScript/docs/blob/master/ApiReference/ui/text-field/Options.md)?

I ended up writing this .ios.js file to turn off autocapitalization and autocorrection on iOS (https://github.com/tjvantoll/grocery-list/blob/master/app/app/views/login.ios.js). Now I want to default iOS to an email address keyboard so I'm about to create the same type of file. Is my current approach the best way of handling this?

Thanks,
TJ

[Rossen Hristov]

Hi,

Currently, these are the things that can be configured on the EditableTextBase class (both TextField and TextView inherit from EditableTextBase):

export interface Options extends textBase.Options {
    /**
     * Gets or sets the soft keyboard type.
     */
    keyboardType?: string;

    /**
     * Gets or sets the soft keyboard return key flavor.
     */
    returnKeyType?: string;

    /**
     * Gets or sets whether the instance is editable.
     */
    editable?: boolean;

    /**
     * Gets or sets a value indicating when the text property will be updated.
     * Possible values are contained in the UpdateTextTrigger enumeration located in "ui/enums" module.
     */
    updateTextTrigger?: string;
}

Here are the possible enum values for these properties:

/**

 * Represents a soft keyboard flavor.

 */

module KeyboardType {

    /**

     * Android: android.text.InputType.TYPE_CLASS_DATETIME | android.text.InputType.TYPE_DATETIME_VARIATION_NORMAL

     * iOS:  UIKeyboardType.UIKeyboardTypeNumbersAndPunctuation

     */

    export var datetime: string;

     

    /**

     * Android: android.text.InputType.TYPE_CLASS_PHONE

     * iOS:  UIKeyboardType.UIKeyboardTypePhonePad

     */

    export var phone: string;

     

    /**

     * Android: android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMAL | android.text.InputType.TYPE_NUMBER_FLAG_SIGNED | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL

     * iOS:  UIKeyboardType.UIKeyboardTypeNumbersAndPunctuation

     */

    export var number: string;

     

    /**

     * Android: android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_URI

     * iOS:  UIKeyboardType.UIKeyboardTypeURL

     */

    export var url: string;

     

    /**

     * Android: android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS

     * iOS:  UIKeyboardType.UIKeyboardTypeEmailAddress

     */

    export var email: string;

}

 

/**

 * Represents the flavor of the return key on the soft keyboard.

 */

module ReturnKeyType {

    /**

     * Android: android.view.inputmethod.EditorInfo.IME_ACTION_DONE

     * iOS:  UIReturnKeyType.UIReturnKeyDone

     */

    export var done: string;

 

    /**

     * Android: android.view.inputmethod.EditorInfo.IME_ACTION_NEXT

     * iOS:  UIReturnKeyType.UIReturnKeyNext

     */

    export var next: string;

 

    /**

     * Android: android.view.inputmethod.EditorInfo.IME_ACTION_GO

     * iOS:  UIReturnKeyType.UIReturnKeyGo

     */

    export var go: string;

     

    /**

     * Android: android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH

     * iOS:  UIReturnKeyType.UIReturnKeySearch

     */

    export var search: string;

     

    /**

     * Android: android.view.inputmethod.EditorInfo.IME_ACTION_SEND

     * iOS:  UIReturnKeyType.UIReturnKeySend

     */

    export var send: string;

}


/**
 * Represents an enumeration specifying when the text property of an EditableTextBase will be updated.
 */
module UpdateTextTrigger {
    /**
     * The text property will be udpaded when the widget loses focus.
     */
    export var focusLost: string;

    /**
     * The text property will be udpaded on every single character typed by the user.
     */
    export var textChanged: string;
}

Please, give us a list of other options one may need so we can think about how to implement them in both platforms.

Regards,
Rossen Hristov
Telerik

 

 

[TJ]

Hi Rossen,

Could you give me an example of how to configure the keyboardType? I tried <TextField keyboardType="email" />, and getting a reference to the <TextField/> and setting its keyboardType in JavaScript... and neither worked. I must be missing something.

In terms of options the only two that come to mind at the moment are autocorrect and autocapitalize (UITextAutocorrectionType and UITextAutocapitalizationType on iOS). If I think of others I'll let you know.

Thanks,
TJ

[Rossen Hristov]

Hi,

Are you using the version that contains those features? Because I have tried setting the keyboard to email and it works as expected, i.e. shows the @ symbol and so on.

You can check whether you have this enum in the \assets\tns_modules\ui\enums\enums.js file.

Regards,
Rossen Hristov
Telerik

 

 

[TJ]

I don't appear to https://github.com/tjvantoll/grocery-list/blob/master/app/tns_modules/ui/enums/enums.js, and I'm running v 0.4.2 of NativeScript. Is there an easy way that I can upgrade or drop in a few files?

If not that's fine. I can way until the next release to make the appropriate changes.

Thanks,
TJ

[Rossen Hristov]

Hi,

The easiest way will be to wait for an official release. I can assure you that this feature will work as expected, so you can count on that.

Regards,
Rossen Hristov
Telerik

 

 

[TJ]

Will do. Thanks Rossen.

[TJ]

Hi Rossen,

I verified that the keyboardType change made it into 0.9 and that it works as expected, so thanks! By chance did autocapitalization or autocorrection make it in? I'm not seeing references to those in the source, so I'm currently manually adding a bit of JS code to do this: https://github.com/tjvantoll/groceries/blob/959fba7e9f17ff83b3e2d21adbbf2c3043b3c086/app/app/views/login.js#L13-19

Thanks,
TJ

[Rossen Hristov]

Hello,

I am afraid we do not have those yet. I am currently on a sick leave. I will get to those features on Monday when I go back to work.

Regards,
Rossen Hristov
Telerik