InputText и InputPassword

В Babylon.js для создания интерактивных и динамичных приложений часто используются различные формы ввода данных. Одними из таких элементов являются InputText и InputPassword, которые позволяют пользователям вводить текстовую информацию в интерфейсе. Эти элементы широко используются в различных сценариях: от простых форм до сложных веб-приложений, требующих пользовательского ввода.

Создание InputText

Элемент InputText представляет собой текстовое поле, в которое пользователь может вводить символы. Он является частью библиотеки Babylon.js, но в контексте пользовательского интерфейса (GUI) работает через систему AdvancedDynamicTexture. Для создания такого элемента необходимо сначала создать AdvancedDynamicTexture для сцены, а затем добавить на неё текстовое поле.

Пример создания InputText:

// Создание сцены
var scene = new BABYLON.Scene(engine);

// Создание AdvancedDynamicTexture для сцены
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);

// Создание элемента InputText
var inputText = new BABYLON.GUI.InputText();
inputText.width = "200px";
inputText.height = "40px";
inputText.color = "white";
inputText.background = "black";
inputText.fontSize = 20;
inputText.text = "Введите текст...";

// Добавление InputText на экран
advancedTexture.addControl(inputText);

В этом примере создается текстовое поле с размерами 200x40 пикселей, черным фоном и белым текстом. Размер шрифта установлен на 20 пикселей, и в поле по умолчанию отображается текст “Введите текст…”.

Основные параметры InputText:

  • width и height: задают размеры поля ввода.
  • color: цвет текста.
  • background: цвет фона поля.
  • fontSize: размер шрифта.
  • text: начальный текст, который будет отображаться в поле ввода.

Получение текста из InputText

После создания поля ввода важно научиться извлекать данные, введенные пользователем. Для этого можно использовать свойство text объекта InputText.

var userInput = inputText.text;
console.log(userInput); // Вывод введенного текста в консоль

Это позволяет получить строку, которую пользователь ввел в поле, и использовать её в дальнейшем, например, для обработки на сервере или в логике приложения.

Создание InputPassword

Аналогично полю ввода текста, Babylon.js предоставляет элемент InputPassword, который скрывает символы, вводимые пользователем, для обеспечения конфиденциальности. Этот элемент работает по аналогии с InputText, но имеет дополнительную настройку, которая изменяет отображение вводимых символов на звездочки.

Пример создания InputPassword:

// Создание элемента InputPassword
var inputPassword = new BABYLON.GUI.InputText();
inputPassword.width = "200px";
inputPassword.height = "40px";
inputPassword.color = "white";
inputPassword.background = "black";
inputPassword.fontSize = 20;
inputPassword.password = true;  // Устанавливаем поле как InputPassword
inputPassword.text = "Введите пароль...";

// Добавление InputPassword на экран
advancedTexture.addControl(inputPassword);

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

Основные параметры InputPassword:

  • password: задает, что поле является полем ввода пароля. Когда это свойство установлено в true, вводимые символы будут скрыты.
  • text: начальный текст, который будет отображаться в поле ввода пароля.

Получение текста из InputPassword

Как и в случае с InputText, для получения данных из InputPassword используется свойство text. Несмотря на то, что символы скрыты, данные, введенные пользователем, можно получить в полном объеме.

var password = inputPassword.text;
console.log(password); // Вывод пароля в консоль

Валидация ввода

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

Пример валидации:

inputText.onTextChangedObservable.add(function() {
    if (inputText.text.length < 5) {
        inputText.color = "red";  // Если текст меньше 5 символов, цвет текста станет красным
    } else {
        inputText.color = "white";  // Если текст длиной 5 и более символов, цвет текста станет белым
    }
});

В этом примере добавляется обработчик события onTextChangedObservable, который отслеживает изменения в поле ввода и меняет цвет текста в зависимости от его длины.

Обработка событий

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

Пример обработки событий:

inputText.onFocusObservable.add(function() {
    console.log("Поле ввода получило фокус");
});

inputText.onBlurObservable.add(function() {
    console.log("Поле ввода потеряло фокус");
});
  • onFocusObservable: событие, которое срабатывает, когда поле ввода получает фокус.
  • onBlurObservable: событие, которое срабатывает, когда поле ввода теряет фокус.

Эти события могут быть полезны, если необходимо выполнять дополнительные действия, такие как подсветка поля или валидация ввода.

Стилизация и кастомизация

Благодаря широким возможностям стилизации, Babylon.js позволяет глубоко настраивать внешний вид элементов управления. С помощью свойств, таких как fontFamily, textHorizontalAlignment, textVerticalAlignment, можно кастомизировать отображение текста, а с помощью свойств, отвечающих за цвет фона, рамки и прочее, можно создать визуально привлекательные и функциональные элементы.

Пример кастомизации InputText:

inputText.fontFamily = "Arial";
inputText.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
inputText.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
inputText.borderColor = "green";
inputText.borderThickness = 2;

Заключение

Элементы InputText и InputPassword предоставляют удобные и гибкие инструменты для создания форм ввода данных в приложениях, использующих Babylon.js. Они позволяют не только вводить текст и пароли, но и взаимодействовать с ними через события, изменять стили и выполнять валидацию. Эти возможности делают их важной частью интерфейса любого интерактивного приложения.

Оглавление