UI/UX Нужна помощь в HTML коде.

[fludd777]

Привет!
Сейчас создаю фишинг инстаграм, и в поле ввода, где написано "Телефон, юзернейм, или элпочта" не пропадает подсказка после ввода символов. Как это можно исправить?
Прикрепляю скрин.

 

[DildoFagins]

Сейчас создаю фишинг инстаграм, и в поле ввода, где написано "Телефон, юзернейм, или элпочта" не пропадает подсказка после ввода символов. Как это можно исправить?

В общем случае - никак. Подсказки - это Autofill, хранятся в базе данных браузеров. Насколько я помню, там подсказка ассоциируется с именем поля формы, то есть у поля ввода пользователя должно быть такое же имя, как у оригинала. Но гарантировать это нельзя, тк подсказка (опять же, насколько я помню) может быть привязана к конкретному урл.

 

[hackeryaroslav]

2 способа:

CSS:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } 
input:focus::-moz-placeholder { color:transparent; 
input:focus:-ms-input-placeholder { color:transparent; }

Либо js:

var input = document.querySelector('input[name="phone_email_username"]');
input.addEventListener('focus', function() {
  if (input.value === input.placeholder) {
    input.value = '';
  }

input.addEventListener('blur', function() {  if (input.value === '') {    input.value = input.placeholder;  }});
});

 

[fludd777]

Спасибо, буду пробовать

2 способа:

CSS:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent;
input:focus:-ms-input-placeholder { color:transparent; }

Либо js:

var input = document.querySelector('input[name="phone_email_username"]');
input.addEventListener('focus', function() {
  if (input.value === input.placeholder) {
    input.value = '';
  }

input.addEventListener('blur', function() {  if (input.value === '') {    input.value = input.placeholder;  }});
});

 

[HostBost]

не пропадает подсказка после ввода символов

если под подсказкой подразумевается плейсхолдер, то скинь html код твоих инпутов

 

[fludd777]

если под подсказкой подразумевается плейсхолдер, то скинь html код твоих инпутов

<input
aria-label="Пароль"
aria-required="true"
autocapitalize="none"
autocorrect="off"
class="_aa4b _add6 _ac4d _ap35"
type="password"
value=""
name="password"
/>

 

[Dark_TM]

<input
aria-label="Пароль"
aria-required="true"
autocapitalize="none"
autocorrect="off"
class="_aa4b _add6 _ac4d _ap35"
type="password"
value=""
name="password"
/>

aria-required="true" убери это отвечает за проверку введенных данных в поле

 

[fludd777]

aria-required="true" убери это отвечает за проверку введенных данных в поле

Не помогло

 

[Dark_TM]

Не помогло

если не помогло значит скорее всего где то в этих классах прописано _aa4b _add6 _ac4d _ap35
сложна помочь когда не видишь код
ты уверен что не помогло?
Бывает такое что кэш не сразу обновляется когда изменения вносишь в коде сайта ctrl+f5
если реально не помогло то можешь в лс показать код помогу или сюда скинь

 

[HostBost]

aria-label="Пароль"

aria-* нужен для скринридеров

в данном случае js добавляет класс _aa49 к лейблу, если value != "", а __aa49 в свою очередь содержит правило: если внутри него есть элемент с классом _aa4a, то он добавляет к этому элементу transform scale. Благодаря этому тег span, содержащий подсказку, поднимает в верхнюю часть инпута. Тебе нужно просто через js отслеживать значение инпута и вещать на соответсвтующий элемент класс, который будет поднимать его также, как и в оригинале

 

[fludd777]

если не помогло значит скорее всего где то в этих классах прописано _aa4b _add6 _ac4d _ap35
сложна помочь когда не видишь код
ты уверен что не помогло?
Бывает такое что кэш не сразу обновляется когда изменения вносишь в коде сайта ctrl+f5
если реально не помогло то можешь в лс показать код помогу или сюда скинь

Да, не помогло

 

[fludd777]

aria-* нужен для скринридеров

в данном случае js добавляет класс _aa49 к лейблу, если value != "", а __aa49 в свою очередь содержит правило: если внутри него есть элемент с классом _aa4a, то он добавляет к этому элементу transform scale. Благодаря этому тег span, содержащий подсказку, поднимает в верхнюю часть инпута. Тебе нужно просто через js отслеживать значение инпута и вещать на соответсвтующий элемент класс, который будет поднимать его также, как и в оригинале

Посмотреть вложение 79392

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

 

[HostBost]

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

выглядит как база для фронта. Это займет минут 20 от силы, если ты это ранее не делал

 

[MrSwin]

Легкая и рабочая схема с версткой HTML кода выглядит так.
Покупаем подписку ChatGPT 3.5 - 4.0


Кидаем ему код и говорим - сэр у меня не работает то и то, сделай полностью готовый код и дай мне его файлом.


Done!