Поле text ​

Поле используется для ввода текста.

• Ключевое слово text. Используется по умолчанию.
• WhatWG Спецификация.

Параметры ​

autofocus Необязательный ​

• Тип boolean | 'true' | 'false'.

Если данный параметр передаётся, при установке данного поля, на него будет автоматически передано управление.

placeholder Необязательный ​

• Тип string

Строковое значение подсказки перед вводом данных.

maxlength Необязательный ​

• Тип 'string | number' Ограничивает максимальный размер вводимых данных.

prefix Необязательный ​

• Тип 'string' Если данный атрибут передан, он будет отображаться перед вводимым значением.

numeric Необязательный ​

• Тип boolean Если данный атрибут указан, ввод будет приводиться к валидному числу. Обратите внимание, что тип возвращаемого значения остаётся строковым.

pretty Необязательный ​

• Тип StringModify.

Используется для изменения отображения поля. Не изменяет значение, хранимое в форме. Данные правила принимаются только после того, как поле стало не активным.

modify Необязательный ​

• Тип StringModify.

Функция для изменения вводимого значения. В отличие от pretty, работает перманентно. Изменяет значение хранимое в форме.

Так же все параметры, общие для всех FormField. Информацию о них можно посмотреть на этой странице.

Значение ​

Данное поле работает со строковыми значениями.

Спецификация ​

• Поле доступно при использовании Tab и Shift + Tab.
• Блокировка отменяет навигацию через Tab.
• Блокировка поля изменяет стилистику text.
• Ошибка валидации изменяет стилистику text.
• Аттрибут maxlength влияет на ограничения только при вводе значения. Если значение будет установлено из формы и по длине будет превышать значение maxlength, оно не будет обрезано в поле, а выведется полностью.

Примеры ​

Для данного поля нет дополнительных обязательных параметров, по этому нам необходимо указать лишь name, т.к. атрибут type по умолчанию имеет значение text. Функции pretty и modify находятся во вкладке ts:

<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, '');
}

Поле по умолчанию:

В заблокированном состоянии:

Поле не прошло валидацию:

Ограничение длинны поля используя maxlength:

Использование prefix:

Ввод строки приводимой к числу, использование атрибута numeric:

Изменение только отображаемого значения при помощи pretty:

Изменения ввода через modify:

Текущее состояние формы:

{}

{}