This is a migrated thread and some comments may be shown as answers.

Ability to customize TextInput

8 Answers 47 Views
NativeScript Insiders
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
TJ
Top achievements
Rank 1
TJ asked on 08 Jan 2015, 02:48 PM
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

8 Answers, 1 is accepted

Sort by
0
Rossen Hristov
Telerik team
answered on 09 Jan 2015, 07:27 AM
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.

 
0
TJ
Top achievements
Rank 1
answered on 09 Jan 2015, 08:17 PM
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
0
Rossen Hristov
Telerik team
answered on 13 Jan 2015, 08:17 AM
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.

 
0
TJ
Top achievements
Rank 1
answered on 13 Jan 2015, 01:28 PM
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
0
Rossen Hristov
Telerik team
answered on 13 Jan 2015, 01:32 PM
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.

 
0
TJ
Top achievements
Rank 1
answered on 13 Jan 2015, 01:41 PM
Will do. Thanks Rossen.
0
TJ
Top achievements
Rank 1
answered on 26 Feb 2015, 08:55 PM
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
0
Rossen Hristov
Telerik team
answered on 04 Mar 2015, 11:23 AM
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.

 
Tags
NativeScript Insiders
Asked by
TJ
Top achievements
Rank 1
Answers by
Rossen Hristov
Telerik team
TJ
Top achievements
Rank 1
Share this question
or