51

StackOverflow はどのようにタグ システムを作成しますか。テキスト領域でhtmlをどのようにフォーマットできますか?

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

このような：

ここに画像の説明を入力

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

4

5 に答える 5

28

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>

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

ここに画像の説明を入力

見てみな。

于 2016-04-01T07:57:51.587 に答える
23

私がすることは次のとおりです。

  • ボーダー付きのマスター DIV を作成します (ここではボーダー 1px solid #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を書きます

于 2012-05-31T18:59:48.137 に答える
7

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

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

于 2012-05-31T19:01:22.740 に答える