質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.90%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 3
  • VIEW 2,847

bouyomisan

score 87

イメージ説明

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

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

<div class="textoverlay-wrapper" style="margin: 0px; padding: 0px; overflow: hidden; display: block; position: relative;">
  <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>
  <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;">
</div>

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

Re: moorii さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/16 17:08

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

    キャンセル

  • 2017/05/16 22:25

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

    キャンセル

  • 2017/05/18 18:13

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

    キャンセル

check解決した方法

+1

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

  $(".tag-input").on("keydown", function(e){

    //スペースかエンターをおせばタグ作成
    if(e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 229){
      var $text = this.value
      var $prev_txt = $("." + $type + "-tag-value").text()
      $("input[data-type=" + $type + "]").before(add_tag($text, $type))
      $("." + $type + "-tag-value").text($prev_txt + " " + $text)    
      this.value = ""
      }
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

すでにthink49さんがわかりやすくご回答してくださっているので解決しているかも知れませんが、input要素のキー入力監視は、jQueryのkeyupイベントで実装できます。
https://api.jquery.com/keyup/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 18:16

    どうやらそのようですね!
    できましたm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る