Text field

The gameface-text-field is part of the Gameface custom components suite. As most of the components in this suite, it uses slots to allow dynamic content.

Installation #

npm i coherent-gameface-text-field

Usage with UMD: #

<script src="./node_modules/coherent-gameface-text-field/dist/text-field.production.min.js"></script>

• add the gameface-text-field component to your HTML:

<gameface-text-field type="text"></gameface-text-field>

This is all! Load the file in Gameface to see the text field.

Usage with JavaScript: #

If you wish to import the TextField using JavaScript you can remove the script tag and import it like this:

import { TextField } from 'coherent-gameface-text-field';

or simply

import 'coherent-gameface-text-field';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

Text field attributes #

Attributes are used for configuration when the gameface-text-field component is initialized like <gameface-text-field type="password"></gameface-text-field> that will display text field for typing a password inside.

Common attributes #

v.3.1.0 #

text-field-control-disabled attribute has been changed to control-disabled.

Text type related attributes #

The next attributes are working with all the <gameface-text-field> types without the number type.

Number type related attributes #

The next attributes are working just when the gameface-text-field type is number.

Text field types #

The type of the text field is defined by the type attribute.

• text - The text field will accept any string input.
• password - The text field will accept any string input but it will be masked with the * character.
• email - The text field will accept any string input. When the text field is used inside a gameface-form-control component it will be validated on submit if its value is a valid email (a string that includes the @ symbol).
• url - The text field will accept any string input. When the text field is used inside a gameface-form-control component it will be validated on submit if its value is a valid url.
• search - The text field will accept any string input. The text field will display additional control (cross button) that can be used to clear the input value.
• number - The text field will accept any number input. The text field will display additional control (arrow up and down) that can be used to increase/decrease the value with the step specified. By default, the arrows will change the value with step that is 1. The number type does not support the e symbol!

Input events to a gameface text input #

You can add input specific events directly to the gameface-text-field element like input, change, focus, blur by the addEventListener interface.

Change gameface text field attributes runtime #

You can change all the attributes from the tables above (common attributes, text type related attributes, number type related attributes) runtime and they will take effect over the text-field behavior. For example you can change the type of the text-field via the type attribute value:

const textField = document.querySelector('gameface-text-field');
textField.setAttribute('type', 'number');
textField.setAttribute('value', '10'); // You can also set a new value of the text-field like this.

Change gameface text field properties programmatically #

To change runtime the type of the text field for example you can:

1. Get the text field element like const textField = document.querySelector('gameface-text-field').
2. Change the type like textField.type = 'password'.

All the available properties that can be changed runtime are:

• type - will change the text field’s type. textField.type = 'number'.
• value - will change the text field’s value. textField.value = 'some different value'.
• disabled - will enable/disable the text field. textField.disabled = true will disable the field and textField.disabled = false will enable it again.
• readonly - will make the text field readonly. textField.readonly = true will make the field readonly and textField.readonly = false will enable it again.
• label - will change the text field’s label. textField.label = 'User name:'.
• placeholder - will change the text field’s placeholder. textField.placeholder = 'Type your username here'.
• controlDisabled - will hide/show text field control for type - search and number. textField.controlDisabled = true will hide the control and textField.controlDisabled = false will show the control.
• maxlength - will change the max length of the text field. textField.maxlength = 10.
• minlength - will change the min length of the text field. textField.minlength = 2.
• max - will change the maximum limit of the text field when the type is number. textField.max = 10.
• min - will change the minimum limit of the text field when the type is number. textField.min = 1.
• step - will change the step of the text field when the type is number. textField.step = 0.5.

v.3.1.0 #

inputControlDisabled property has been changed to controlDisabled.

Example #

“You can check the demo.html file, which contains many examples of how to use the gameface-text-field component. There you will find:

• How to use all the available gameface-text-field attributes.
• How to customize the default gameface-text-field elements.
• How to use events with gameface-text-field.