web-dev-qa-db-ja.com

Stackoverflowはどのようにタグ入力フィールドを作成しますか？

StackOverflowがタグシステムを作成する方法テキスト領域でHTMLをどのようにフォーマットできますか？

どこから始めればいいのかわからない。誰かが私を導くことができれば、私は誰かがチェックできるいくつかのコードを書くことができるように、私が取るべき方向を知ることができます。

これのように：

enter image description here

編集：基本的に、スペースを押すと、divの内部に新しい要素/ divを追加するにはどうすればよいですか？

htmlinputtags
41
Mathew Kurian

私がすることは：

  • ボーダー付きのマスターDIVを作成します（ここでは、ボーダー1pxソリッド＃000のように）
  • その後、このDIV内で、別のDIV（float：left;）、別のDIV（float：right）、および右側のdiv内に入力を作成します。

入力の内側に書き込み、HTMLを選択すると、左側のDIVにスパンが作成され、残りのサイズに合わせて右側のdivの幅が縮小されます。もちろん、スパン内には、削除記号付きのテキストHTMLがあります。

JQueryを使用すると簡単にできます。

例：

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

そして、あなたはいくつかのjQuery/JSを書きます

20
David Bélanger

Bootstrapソリューションについてはどうですか？

あなたはこれを試すことができます：

HTMLコード：

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

CSSの場合、次の2つのファイルを呼び出します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

JavaScriptの場合、次の2つのファイルを呼び出します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

コードは以下の結果を生成します：

enter image description here

ご覧ください

</ strong>

20
Jad Chahine

そうではありません。 DOMを見ると、最初は入力ボックスだけが表示されています。タグを追加すると、そのタグが付いた入力ボックスの前に<span>タグが挿入され、削除アイコンになります。入力ボックスはこの<span>タグの右側にあります。タグをクリックして編集すると、テキストボックスがその場所に配置され、編集できるようになります。これはすべてJavaScriptで行われ、これを行うためのJQueryプラグインがいくつかあります。これは、Googleのクイック検索の1つです。 http://xoxco.com/projects/code/tagsinput/

スタイリングに関する限り、<span>要素には、必要なCSSを含めることができます。

7
sachleen
var es = document.querySelectorAll('.input-categories');
for (var i = 0; i < es.length; i++) {
  es[i]._list = es[i].querySelector('ul');
  es[i]._input = es[i].querySelector('input');
  es[i]._input._icategories = es[i];
  es[i].onkeydown = function(e){
    var e = event || e;
    if(e.keyCode == 13) {
      var c = e.target._icategories;
      var li = document.createElement('li');
      li.innerHTML = c._input.value;
      c._list.appendChild(li);
      c._input.value = '';
      e.preventDefault();
    }
  }
}
*{
  margin: 0px;
  padding: 0px;
}

.input-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid black;
}

.input-categories ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  flex-wrap: wrap;
}

.input-categories li{
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  margin: 1px;
}
.input-categories input{
  flex: 1 1 auto;
  align-self: flex-start;
}
<div class="input-categories">
  <ul>
    <li>moscow</li>
    <li>new york</li>
  </ul>
  <input type="text"/>
</div>

<div class="input-categories">
  <ul>
    <li>CSS</li>
    <li>PHP</li>
  </ul>
  <input type="text"/>
</div>
3
Максим