0

Gostaria de fazer algo como:

inserir a descrição da imagem aqui

Pra cada palavra que o usuário digita, ele ficasse assim como na imagem acima.

O mais próximo que consegui chegar foi saber a quantidade de palavras que ele digitou, segue código abaixo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
                    <div class="input-field col s12">
                        <input id="first_name" type="text" class="validate palavras-chaves">
                        <label for="first_name">Palavras Chaves</label>
                    </div>
                </div>
<script type="text/javascript">
var palavrasChaves = $(".palavras-chaves");
palavrasChaves.on("input",function(){
        var conteudo = palavrasChaves.val();
        var qntdPalavras = conteudo.split(/\S+/).length -1;
        console.log(qntdPalavras);
 
    });
    
    </script>

4
  • Como você está utilizando JQuery, existem vários plugins com essa funcionalidade. Você quer algo pronto ou implementar "do zero"? Commented 5/11/2018 às 18:40
  • @Renan Seria interessante implementar do zero, mas poderia poderia me dizer quais plugins?
    – user129815
    Commented 5/11/2018 às 18:43
  • @Amanda da uma olhada no link que o Renan passou, tem varias opcoes boas
    – Eloa
    Commented 5/11/2018 às 19:21
  • Tentei utilizar o TaggingJS e até funcionou no browser, mas o ideal seria ele separar por espaço, pois no celular só aplica a formatação quando saio do input. Será que teria como alterar?
    – user129815
    Commented 5/11/2018 às 19:43

3 Respostas 3

1

Se estiver utilizando jQuery, um que já utilizei e é bem fácil de se usar é o bootstrap tags input.

OBS: ele funciona apenas até o Bootstrap versão 3.3.7

$("input").tagsinput('items')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

<input type="text" value="teste" data-role="tagsinput" />

4
  • como ficaria no celular? o ideal seria cada vez que ele clicasse espaço...
    – user129815
    Commented 5/11/2018 às 19:41
  • Eu entrei no site que é este link que coloquei na reposta, e quando digito no input fica uma seta no teclado, tipo como se fosse um enter, aí ele insere a tag.
    – LeAndrade
    Commented 5/11/2018 às 20:06
  • 1
    Para usar o espaço use a opção com o código 32: $("input").tagsinput({ confirmKeys: [13, 32] })... o código 13 é do ENTER.
    – Sam
    Commented 5/11/2018 às 20:16
  • 1
    @Sam obrigado, realmente não mencionei que o plugin tem diversas opções de personalização também.
    – LeAndrade
    Commented 5/11/2018 às 20:25
0

Você está utilizando jQuery, poderia utilizar um plugin como o TaggingJS e com essa linha você resolveria seu problema. $('#inputDaTag').tagging();

0

Eu utilizei esse e ficou bem legal:

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

É só referenciar os arquivos js e css na página e deixar seu input assim:

 <input id="first_name" type="text" data-role="tagsinput" class="form-control">

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