Tabris.js Widgets: TextInput

TextInput widget is a field that allows the user to enter text. It can be used similar to how input or textarea tags used in HTML. With the help of TextInput, you can create the most basic input forms – for login and registering, for editing profile information, for leaving a comment and many others.

Properties and events

• Property enterKeyType allows you to change the icon for the “Enter” button on the keyboard. With values like next, send, search, go, you can make the input field function more intuitive. Try example #3 to see it in action;
• Properties focused and keepFocus allow you to manipulate the keyboard focus. For example, on a login page, you can first set focus on the Username input and then change the focus to the Password input once the Username is submitted;
• Using the keyboard property, you can set the keyboard type for an input field. For example, set the number type if the field should contain only numbers;
• The message property allows you to display a hint when the input field is empty;
• Set the type property to multiline to enable word-wrap and show text in multiple lines.

Examples

1. Here are all TextInput styles, designed according to the Material Design specs. That example is written in JSX – an XML-like ECMAScript syntax extension that can make your Tabris.js code simple and more understandable, compared to JavaScript.
   import { contentView, Stack, TextInput } from 'tabris'; contentView.append( <Stack stretch spacing={16} padding={16} alignment='stretchX'> <TextInput style='outline' message='outline'/> <TextInput style='fill' message='fill'/> <TextInput style='underline' message='underline'/> <TextInput style='none' message='none'/> </Stack> );

   1 2 3 4 5 6 7 8 9 10

   import { contentView, Stack, TextInput } from 'tabris'; contentView.append( <Stack stretch spacing={16} padding={16} alignment='stretchX'>    <TextInput style='outline' message='outline'/>    <TextInput style='fill' message='fill'/>    <TextInput style='underline' message='underline'/>    <TextInput style='none' message='none'/> </Stack> );

   

   

2. TypeScript example of using different types of keyboards:
import { TextInput, contentView } from 'tabris'; //"keyboard" property is not set - default keyboard new TextInput({ top: 25, left: '20%', right: '20%', message: 'default' }).appendTo(contentView); new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'ascii', message: 'ascii' }).appendTo(contentView); new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'decimal', message: 'decimal' }).appendTo(contentView); new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'number', message: 'number' }).appendTo(contentView); new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'numbersAndPunctuation', message: 'numbersAndPunctuation' }).appendTo(contentView); new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'phone', message: 'phone' }).appendTo(contentView); //with email keyboard you have quick access to the @ symbol //also there is an email autofill on Android! new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'email', message: 'email' }).appendTo(contentView); // quick access to the symbol "/" //".com" button for some devices new TextInput({ top: 'prev() 10', left: '20%', right: '20%', keyboard: 'url', message: 'url' }).appendTo(contentView);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

import { TextInput, contentView } from 'tabris'; //"keyboard" property is not set - default keyboard new TextInput({    top: 25, left: '20%', right: '20%',    message: 'default' }).appendTo(contentView); new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'ascii',    message: 'ascii' }).appendTo(contentView); new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'decimal',    message: 'decimal' }).appendTo(contentView); new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'number',    message: 'number' }).appendTo(contentView); new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'numbersAndPunctuation',    message: 'numbersAndPunctuation' }).appendTo(contentView); new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'phone',    message: 'phone' }).appendTo(contentView); //with email keyboard you have quick access to the @ symbol //also there is an email autofill on Android! new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'email',    message: 'email' }).appendTo(contentView);   // quick access to the symbol "/" //".com" button for some devices new TextInput({    top: 'prev() 10', left: '20%', right: '20%',    keyboard: 'url',    message: 'url' }).appendTo(contentView);





3. Usage of different “Enter” key types

For more detailed information about the widget, use TextInput documentation page.