Ability to customize TextInput

9 posts, 0 answers
  1. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 08 Jan 2015 Link to this post

    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
  2. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 09 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 09 Jan 2015 in reply to Rossen Hristov Link to this post

    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
  4. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 13 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 13 Jan 2015 in reply to Rossen Hristov Link to this post

    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
  6. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 13 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 13 Jan 2015 in reply to Rossen Hristov Link to this post

    Will do. Thanks Rossen.
  8. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 26 Feb 2015 Link to this post

    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
  9. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 posts

    Posted 04 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top