Input de tags

[charleskx 4]

Alguém sabe como crio aqueles inputs onde você digita algo e aperta o enter ele transforma a falavra em uma tag?

O mesmo usado aqui no forum

[William Bruno 1501]

Sim, sei fazer. Qual a dúvida ?

 

Uma dica, é ouvir o evento onkeypress e onblur do usuário. Qndo ele digitar um espaço, ou sair do campo, vc aplica uma classe css que posiciona um elemento <span> dentro do input, com a formatação da tag que vc quiser.

[charleskx 4]

 

Tem algum tutorial que explique como fazer isso?

[William Bruno 1501]

Nops. Não tenho.

 

Observei um pouco mais o sistema de tags aqui do fórum. Ele trabalha um pouco diferente do que falei.

Ele escuta sim o onkeypress e o onblur, mas só transforma em tag após alguns milissegundos. Assim dá a possibilidade de criar tags com várias palavras. E dá chance para quem digita lento.

 

Além disso, a forma com que ele posiciona é diferente. Cada tag é uma LI, dentro de um UL.

O UL é que tem o estilo e te engana parecendo ser o input. O input real está ao lado das LIs dentro da UL.

 

Dessa forma vc só é capaz de digitar no input, e conforme for dando append das LIs vai empurrando o input para o lado.

 

 

 

Tente fazer e pare de buscar tutoriais para tudo. Só assim você vai evoluir como programador.

[charleskx 4]

 

Concordo com você, mais é que sou iniciante em js

Por isso queria um tutorial, como irei fazer se não faço a menor ideia de como começar :mellow:

[William Bruno 1501]

Comece do html/css.

Faça a UL parecer um input. E os seus LIs serem suas tags. Ai posiciona o input como irmão dos LIs.

 

Esse é o começo. :lol:

[rafaelwn 4]

charleskx

 

Pra você não precisar reinventar tudo o que já existe, você pode usar alguns plugins que já existem, principalmente para jQuery.

 

Tem um bem bom que trabalha tanto na função de um <select> com busca, quanto nos multi-selects, e também nos campos de texto com palavras separadas por vírgula, que são representados por tags.

 

Segue o link desse que te falei.

http://ivaynberg.github.io/select2/#multi

 

Faz o teste nos campos que tem a possibilidade de digitar.

Tem algumas opções ali mais pra baixo, que você pode digitar qualquer coisa, sem precisar estar pré-definido.

 

Valeu.

[Yuri Fontella 0]

Se alguém quiser dar uma olhada... http://forum.imasters.com.br/topic/517434-aletrar-o-valor-de-um-input/