WedX - журнал о программировании и компьютерных науках

Мне нужно скрыть заполнитель при фокусировании ввода, но вместо этого показывать метку этого ввода

Я искал, как это исправить, я применил scss и css, также javascript. Мне нужно, чтобы мой ввод отображал заполнитель, когда он открывается нормально, и когда вы фокусируетесь на нем, он будет отображать свою метку и выглядеть маленьким, как на этой фотографии.

https://i.stack.imgur.com/VxEqE.jpg

Это входной код, и метка, с которой я работаю, служит мне любым кодом, ts, js, css, html.

<label> Contraseña </label>
<input placeholder='Ingrese su contraseña...'                           [class.isinvalid]="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<div *ngIf="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<small *ngIf="loginForm.controls.contrasena.hasError('required')">La contraseña es requerido</small>
</div>
</div>

  • Если вы будете искать плавающие метки CSS, вы найдете несколько руководств по созданию этого шаблона. 01.06.2021

Ответы:


1

Вы можете найти это в библиотеке материалов angular, если вы планируете использовать в своем проекте дополнительные параметры. https://material.angular.io/components/form-field/overview#form-field-overview

В противном случае вы можете создать свой пользовательский ввод из этого сообщения.
Переместить заполнитель над вводом в фокусе

01.06.2021

2

вам не нужно скрывать заполнитель, и вы не можете. вы можете сделать это легко -

  1. преобразовать метку немного вниз к точному местоположению заполнителя.
  2. увеличить размер шрифта метки.
  3. установить состояние фокуса ввода, установить преобразование метки в нормальное и уменьшить размер шрифта метки.
  4. чтобы обеспечить переход ко всему этому процессу, используйте свойство перехода в css.
  5. чтобы все работало идеально, добавьте обработчик кликов к метке, чтобы при каждом нажатии он фокусировал ввод. document.getElementById("mytext").focus();
01.06.2021
Новые материалы

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

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]