Блог

Главная - Вопросы по программированию - Как изменить значение представления при вводе без изменения значения модели в Angular

Как изменить значение представления при вводе без изменения значения модели в Angular

#javascript #html #css #angular #typescript

#javascript #HTML #css #angular #typescript

Вопрос:

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

Например, если пользователь вводит «Surendher»

Он должен видеть «$$$$$$$$$» в поле ввода

Значение модели должно оставаться «Верным»

Пожалуйста, сообщите мне об этом.

Комментарии:

1. Вам нужно скрыть пароль или он предназначен для чего-то другого?

2. @QuentinFonck — Да, мне нужно скрыть свой пароль, не устанавливая тип ввода =»пароль». Существующий обходной путь в stack overflow: 1. Применение style -webkit-text-security: disc; 2. Установка dotfont в качестве семейства шрифтов для поля ввода. Это мне не нравится.

3. Почему бы не использовать input type=»password» для пароля?

4. @Sprep — Если я использую тип ввода =»пароль», браузер начнет спрашивать «Хотите ли вы сохранить эти учетные данные», которые мне не нужны

Ответ №1:

Просто идея, но это НЕХОРОШО, ОШИБКИ! Лучше использовать css / type=’password’ .

 let realValue = '';
const str =Array(100).fill('$').join('');

changed = (value) => {
  if(value.length > realValue.length) {
    const target = value.slice(-1);
    realValue  = target;
    this.displayValue = str(0, value.length)
  }
}  
 <input [(ngModel)]="displayValue" #input (keyup)="changed(input.value)">