2

Tenho o seguinte CSS:

.react-tagsinput .react-tagsinput-input {
  width: 100% !important;
}

// coloquei aqui apenas para lembrar que existe essa opção caso desejar usar
//.react-tagsinput--focused .react-tagsinput-input {
//  width: 100% !important;
//}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Tenho o seguinte problema:

Defini .react-tagsinput-input como 100% para o placeholder aparecer por inteiro, pois senão estava aparecendo somente com 80px.

Mas ao clicar fora do input, o campo ainda continua existindo em baixo.

O que eu desejo é: Ao clicar fora do campo, se existir .react-tagsinput-tag como filho, definir .react-tagsinput-input como 0px, ou seja, pra sumir a linha vazia abaixo. Ao clicar novamente, ser definido como 100% de novo.

Existe também .react-tagsinput--focused .react-tagsinput-input caso for necessário usar para o campo clicado.

As duas primeiras imagens estão como eu desejo.

Sem nenhuma tag

Com tag (Tudo certo por aqui) - class mudou para .react-tagsinput--focused

PROBLEMA AQUI - ao clicar fora, gostaria que essa linha sumisse se já existe alguma tag ao perder o foco. Ao ganhar foco novamente, ela aparece para ser digitado

PROBLEMA ESTÁ AQUI NESSA ÚLTIMA IMAGEM - ao clicar fora, gostaria que essa linha sumisse se já existe alguma tag ao perder o foco. Ao ganhar foco novamente, ela aparece para ser digitado novamente.

3
  • Tem algumas formas de fazer sim só com CSS, pelo que entendi se tiver alguma tag ou nada vc quer que a linha tenha uma altura x, se tiver uma tag ou nada e focar a altura é 2x, e no blur volta pra x tendo algo dentro ou não, é isso?
    – hugocsl
    10/07/2019 às 10:01
  • Na verdade não tem a ver com a altura, mas sim com ela aparecer ou não. O que eu quero é: fazer sumir o .react-tagsinput-input SE existir alguma .react-tagsinput-tag ao tirar o focus. Na imagem com a seta vermelha, como perdeu o foco, o certo era sumir o .react-tagsinput-input. Ao clicar novamente, ela deveria aparecer, assim como na 2ª imagem. Se não tiver nenhuma .react-tagsinput-tag, ela também deverá aparecer, pois ela contém o placeholder, como na 1ª imagem. Ou seja, se não existir .react-tagsinput-tag, seja com ou sem foco, .react-tagsinput-input deve aparecer. 10/07/2019 às 10:14
  • Esqueci de comentar que a linha em branco, na verdade apenas não tem o placeholder pois no React fiz a alteração dela caso já existisse algum tag inserida. Portanto, se essa modificação não fosse feita, estaria da seguinte forma: prntscr.com/od1mz2. Eu retiro ele para ficar mais bonito. Se der para já fazer isso só no CSS também, é até melhor do que a gambiarra que fiz no Javascript.. hehe Agradeço desde já @hugocsl =] 10/07/2019 às 10:23

1 Resposta 1

3

Parece que seu sistema gera um span com a tag que na verdade fica fora do input e não dentro dele, isso dificulta um pouco pra fazer só com CSS, uma alternativa é gerar esse span depois do input pra facilitar de colocar a tag caso tenha alguma interação no input acima.

Agora vamos ao código. O único JS que usei, puro, foi para vc poder focar em um input que está dentro de uma div clicando na própria div, tirando isso não precisa mais de JS para nada. Então se clicar na div pai foca no input filho que está dentro ok.

inserir a descrição da imagem aqui

Na imagem acima, o span que vai aparecer com a tag fica com display:block, e só vai aparecer se o input acima tiver algum valor dentro. para fazer essa validação eu uso :not(placeholder-shown), para saber mais leia aqui Função - mostrar senha! que falo um pouco mais sobre isso.

Existe uma propriedade de CSS chamada :focus-within ela serve para estilizar um elemento caso algum filho dentro dele seja focado. Isso é nativo do CSS e é com essa pseudo-classe que eu coloco a cor na div quando foco no input dentro dela

E para "remover" o input eu concateno a técnica assima com um :not(focus), fica assim input:not(:placeholder-shown):not(:focus). Então se não tiver placeholder pq logicamente tem algum valor dentro e não estiver focado, logicamente pq vc clicou fora o input some.

Para tirar o input da tela eu usei o mesmo CSS que o Bootstrap usa na classe sr-only, esse CSS não tira o input da tela com display:none, pois isso atrapalha a acessibilidade, sr-only apenas não deixa o input visível para os usuários "normais", mas o input continua acessível para os leitores de tela screen-readers

Segue o código com o exemplo. tudo com CSS (js só para focar o input quando clica na div, se vc precisar disso...)

var pai = document.querySelectorAll('.react-tagsinput');
var inp = document.querySelectorAll('.react-tagsinput-input');

function foca() {
	inp.forEach( (tag) => {
		tag.focus();
	})
}
pai.forEach( (el) => {
    el.addEventListener('click', foca);
})
* {
    box-sizing: border-box;
}
.react-tagsinput {
  padding: 20px;
  border: 1px solid #000;
}

.react-tagsinput:focus-within {
  background-color: tomato;
}
.react-tagsinput:focus-within .react-tagsinput-input {
  height: 50px;
}
.react-tagsinput .react-tagsinput-input + span {
  display: none;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown) + span {
  display: block;
}
.react-tagsinput .react-tagsinput-input:not(:placeholder-shown):not(:focus){
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
<div class="react-tagsinput">
    <input type="text" class="react-tagsinput-input" placeholder="com placeholder">
    <span class="react-tagsinput-tag">tag</span>
</div>

2
  • 1
    Muito obrigado pela ajuda! Não é a toa que sua reputação no CSS aqui no stack é top! haha Sobre o JS que colocou, como estou usando um tema pronto, provavelmente o cara já fez isso, pois ao clicar na div já funciona o input normalmente. Cara, muito obrigado mesmo! =] 10/07/2019 às 15:02
  • 1
    @GleidsonHenrique legal que deu certo ai jovem! Se o script do tema já resolve é melhor não usar o que eu deixei na resposta, ele foi mas para poder montar o exemplo mesmo. E tenha em mente que essas propriedades de CSS são bem novas, e podem não funcionar nos browsers mais antigos... principalmente no IE...[]´s
    – hugocsl
    10/07/2019 às 15:05

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 .