wsender-input-textbox

Установка

npm i @wsender/input-textbox

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

<input|textarea id="text" type="text"
    type="text|number|email|url|tel" // только для если тег input
    inputmode="string" // только для если тег input
    required
    placeholder
    maxlength="int"
    disabled
    readonly
    data-allow-empty-strings="true|false"
    data-symbolcounter="true|false"
    data-copy-button="false|true" />

var inputElem = document.getElementById("text");
new TextBox(inputElem);

Используйте тег textarea, чтобы был доступен ввод текста в многострочном режиме.

<textarea id="text">text</textarea>

var inputElem = document.getElementById("text");
new TextBox(inputElem);

Параметры

TextBox берёт параметры из аттрибутов элемента input или textarea.

Поддерживаемые аттрибуты от HTMLInputElement:

• type - поддерживаются только text, number, email, url, tel.
• inputmode - поддерживаются все значения.
• required
• placeholder
• maxlength
• disabled
• readonly

Поддерживаемые аттрибуты от HTMLTextAreaElement:

• required
• placeholder
• maxlength
• disabled
• readonly

Кастомные параметры:

• data-allow-empty-strings - разрешает пробелы в качестве значения и по краям значения. По умолчанию false.
• data-symbolcounter - включает отображение счётчика символов. По умолчанию false.
• data-copybutton - включает кнопку для копирования текущего значения. По умолчанию false.

API

var inputElem = document.getElementById("text");
const textbox = new TextBox(inputElem);

textbox.hasValue(): boolean;
textbox.getValue(): string;
textbox.setValue(value: string): void;
textbox.validate(): boolean;

События

textbox-change

Изменение значения пользователем в результате ввода, вставки из буфера обмена или через метод setValue.

var inputElem = document.getElementById("text");
const textbox = new TextBox(inputElem);

textbox.addEventListener("textbox-change", (e: CustomEvent<ChangeEventData>) => {
    e.detail.textbox // экземпляр TextBox, в котором изменёно значение
    e.detail.value // новое значение
});

textbox.onChange(handler: (e: CustomEvent<ChangeEventData>) => { /* process event */ });

Стилизация

Класс рутового элемента: ws-textbox

Субклассы состояний:

• focused - взят фокус пользователя
• required - обязательный для ввода
• multyline - многострочный режим (data-multyline == true)
• readonly - только для чтения
• disabled - отключён
• invalid - невалидное значение
• incorrect - последний введённый символ не корректен по отношению к типу значения
• counter - включён счётчик символов (data-symbolcounter == true)

Миниатюра загрузки

Миниатюра позволяет до создания экземпляра TextBox сохранить высоту и занимаемую область, чтобы после создания TextBox вёрстка не прыгала.

Для отобразения миниатюры к тегу input добавьте класс ws-textbox-input. А сразу под тегом создайте элемент с классом ws-textbox-miniature.

<input class="ws-textbox-input" />
<div class="ws-textbox-miniature"></div>

Если вам нужно стилизовать миниатюру, то применяйте стили к ws-textbox-miniature.