Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Tem algum tutorial que explique como fazer isso?
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.
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:
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:
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.
Se alguém quiser dar uma olhada... http://forum.imasters.com.br/topic/517434-aletrar-o-valor-de-um-input/
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.