0

Tenho um formulário com alguns campos que serão preenchidos pelo usuário.

Algumas vezes, as informações preenchidas são maiores do que o campo.

Gostaria de saber se existe alguma estratégia para passar o mouse em cima do campo, e mostrar o valor completo preenchido pelo usuário, com um comportamento que lembra a propriedade ALT do HTML.

1 Resposta 1

1

Com Html puro não sei se isso seja possível, mas, nada impede de vc criar como no exemplo abaixo que está com Javascript:

let input = document.getElementById('entrada');
let span = document.getElementsByTagName('span')[0];
span.style.display = 'none';

input.addEventListener('mouseover', () => {
  if(input.value.length > 10) {
    span.style.display = 'block';
    span.innerHTML = input.value;
  }
});

input.addEventListener('mouseout', () => {
    span.style.display = 'none';
});
span {
  color: #535250;
  background-color: #faba6b;
  padding: 3px;
  margin-top: 5px;
}
<input type="text" id="entrada">
<span></span>

Passando o código para o Angular ficaria assim com um exemplo simples:

HTML

<input type="text" (mouseover)="showValue()" (mouseout)="hideValue()" #entrada>
<span [hidden]="visible" >{{ entrada.value }}</span>

TS

 @ViewChild("entrada", { static: false }) entrada: ElementRef;
 public visible = true;

 ngOnInit() {}

 showValue() {
   if (this.entrada.nativeElement.value.length > 10) this.visible = false;
 }

 hideValue() {
   this.visible = true;
 }
1
  • Cara, a sua solução parece que está bem próxima de me ajudar, mas ainda não consegui fazer funcionar. Tenho uma aplicação Angular mesmo, onde o usuário precisa preencher um mat-select --> mat-option. Essa implementação não funcionou com o mat-option.. Mas vou seguir tentando. Obrigado pela ajuda! 16/03/2020 às 13:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .