Text field ​

The field is used to enter text.

• Keyword text. Used by default.
• WhatWG Specification.

Options ​

autofocus Optional ​

• Type `boolean | 'true' | 'false'.

If this parameter is passed, when setting this field, control will be automatically transferred to it.

placeholder Optional ​

• Type string

The string value of the prompt before entering data.

maxlength Optional ​

• Type 'string | number' Limits the maximum input size.

prefix Optional ​

• Type 'string' If this attribute is passed, it will be displayed before the input value.

numeric Optional ​

• Type boolean If this attribute is specified, the input will be converted to a valid number. Note, that the return type remains string.

pretty Optional ​

• Type StringModify.

Used to change the display of a field. Does not change the value stored in the form. These rules are accepted only after the field has become inactive.

modify Optional ​

• Type StringModify.

Function to change the input value. Unlike pretty, it works permanently. Changes the value stored in the form.

Also all parameters common to all FormField. Information about them can be found on this page.

Meaning ​

This field works with string values.

Specification ​

• The field is available when using Tab and Shift + Tab.
• Lock cancels Tab navigation.
• Blocking a field changes the style of text.
• Validation error changes style of text.
• The maxlength attribute affects limits only when a value is entered. If the value will be set from the form and will exceed maxlength in length, it will not truncated in the field, but will be displayed completely.

Examples ​

There are no additional required parameters for this field, so we need to specify only name, because the type attribute defaults to text. pretty functions and modify are in the ts tab:

<form-field name="username"/>

<form-field name="username"/>

import {FormField} from "jenesius-vue-form";

function prettyFn(v) {
if (!v) return '';
return `- ${v} - `;
}
function modifyFn(v) {
if (!v) return '';
return v.replace(/[^qwerty]/gi, '');
}

import {FormField} from "jenesius-vue-form";

function prettyFn(v) {
if (!v) return '';
return `- ${v} - `;
}
function modifyFn(v) {
if (!v) return '';
return v.replace(/[^qwerty]/gi, '');
}

Default field:

In locked state:

Field not validated:

Limit field length using maxlength:

Using prefix:

Entering a string converted to a number, using the numeric attribute:

Changing only the displayed value with pretty:

Input changes via modify:

The current state of the form:

{}

{}