背景
テキストを入力してカンマやスペースで区切るとタグになるようなタグ・エディターは、本格的なライブラリとしてはSelect2のtagging supportがありますが、勉強のため自作してみました。
操作方法
- タグエディタ内をマウスクリックするかTABでフォーカスを移すと編集できます。
- カンマかスペースを入れるとタグになります。
- 既に入力済みのタグと同じタグは入力できないようになっています。
- カンマやスペースを含んだ文字列をクリップボードからペーストした場合は複数のタグとして入力します。
- Backspaceを押すかxボタンをクリックするとタグを削除できます。
実装メモ
- タグの色はブクログを真似させていただきました。ありがとうございます。
- IE7ではdisplay: inline-blockの代わりに*display: inline; *zoom: 1というCSSハックを使用していますが、spanだと背景色が表示されなかったのでdivに変更。
- カンマやスペースをキーリピートで入力した場合に削除するようにしてあります。
- タグ入力用のinput要素はCSSでborder: none; outline: noneとしてフォーカスがあるときでもIビームカーソルだけが表示されるようにしてあります。
- ただし、IE7ではborderもoutlineも表示されてしまいます。
- タグ入力して確定した時にフォントが変わらないほうが気持ちが良かったので、同じフォントを使うようにしています。
- タグ入力中にinput要素の幅を文字列に合わせて調整するため、同じフォントを使ったspanをposition: absolute; left: -999pxで画面外に配置し、このspanに文字列を設定して幅を測定しています。
- このとき入力した文字列そのままを設定すると、入力中にinput要素がガクガクしたので、元の文字列にWを1文字加えて幅を測定するようにしました。_だとイマイチでしたが、幅の広いWだと自然な動きになりました。