Tagify

JavaScript

Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

TagifyはVanilla JSを用いた軽量のタグ入力機能を実装できるタグ入力コンポーネントです。入力フィールドやテキストエリアをタグ入力できる場所にしたい時にはピッタリですね。カスタマイズ性にも優れています。

Tagify

デモ

デモには、入力フィールドやテキストエリアを使ったタグ入力やオプションによるカスタマイズされたもの、jQueryプラグインバージョンなど、いろんな種類が用意されています。

ボックス内に任意のタグを入力してenterキーを押すとそのタグが登録される仕組みです。タグの右側にはバツ印が付いており、ここをクリックすることでそのタグを削減することもできます。

シンプルなタグ入力機能でとても使いやすく、また操作もしやすいですね。

オプションも豊富で、delimiters、pattern、duplicates、enforceWhitelist、autocomplete、whitelist、blacklist、addTagOnBlur、callbacks、maxTags、mapValueToProp、dropdown.enabled、dropdown.maxItems、dropdown.classnameといった項目が用意されています。

そのほか、destroy、removeAllTags、addTags、removeTagsといったメソッドやadd、remove、invalidといったイベントもあるので、カスタマイズ性もバッチリです。

Tagify

関連記事

  1. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  2. jQuery contextMenu plugin & polyfill
  3. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  4. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  5. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  6. Jquery Line Progress Bar

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP