Qiita のようなタグの付け方を実装したいです。

Qiitaのタグを入力する画面では、teratail のようなものではなく、半角スペースをつけるまでが一区切りで、つけると新たなタグになる仕組みです。
一区切りの部分は青い背景があります。

入力した状態の HTML をみてみると、値は value にそのまま打たれているようです。べつに新しいタグがつけられた様子はありません。

html
1<input class="form-control" autocomplete="off" name="draft_item[tag_notation]" 
2placeholder="プログラミング技術に関連するタグをスペース区切りで5つまで入力（例: Ruby Rails:4.2.0）" 
3tabindex="2"
4value="rails jquery " 
5style="background: transparent none repeat scroll 0% 0%; position: relative; outline: 0px none;" type="text">

どのようにしたら、半角で区切られた部分を青くすることができるのでしょうか？

行動規範の内容に同意します

回答3件

開発者ツールを使って、DOMツリーを確認して下さい。
下記は「Java JavaScript」と入力した結果をコピペしたものです。

新規投稿 - Qiita

HTML
1<div class="textoverlay-wrapper" style="margin: 0px; padding: 0px; overflow: hidden; display: block; position: relative;">
2  <div class="textoverlay" style="position: absolute; color: transparent; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; margin: 0px; padding: 6px 12px; font-family: sans-serif; font-weight: 400; font-size: 14px; background-color: rgb(255, 255, 255); top: 1px; right: 1px; bottom: 1px; left: 1px;"><span style="background-color: #D9EAFE">Java</span> <span style="background-color: #D9EAFE">JavaScript</span></div>
3  <input type="text" autocomplete="off" class="form-control" name="draft_item[tag_notation]" placeholder="プログラミング技術に関連するタグをスペース区切りで5つまで入力（例: Ruby Rails:4.2.0）" tabindex="2" value="Java JavaScript" style="background: transparent; position: relative; outline: 0px;">
4</div>

装飾は <div class="textoverlay"> の中の span 要素で行われており、input要素に <div class="textoverlay"> を重ねる事で実現しているようです。

Re: moorii さん

投稿2017/05/16 01:43

編集2017/05/16 01:45

think49

総合スコア18162

bouyomisan

2017/05/16 08:08

なるほど、span で囲んでいるのですね。となるとまた疑問が湧いてきたのですが、 input の value の値でスペースをおしたら区切りがつけられ、新たに打った文字は別の span にかこまれてるのですが、どのように実装されているのでしょうか？

think49

2017/05/16 13:25

input要素のキー入力を監視し、[Space] キーを押したらspan要素で括る実装をしていると思われます。

bouyomisan

2017/05/18 09:13

あ、できました！ありがとうございます。

行動規範の内容に同意します

自己解決

こんな感じでやりました！

javascript
1  $(".tag-input").on("keydown", function(e){
2    
3    //スペースかエンターをおせばタグ作成
4    if(e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 229){
5      var $text = this.value
6      var $prev_txt = $("." + $type + "-tag-value").text()
7      $("input[data-type=" + $type + "]").before(add_tag($text, $type))
8      $("." + $type + "-tag-value").text($prev_txt + " " + $text)    
9      this.value = ""
10      }
11  });