ITエンジニア/デザイナ向けにオープンソースを毎日紹介

テキストエリアでWYSIWYGな編集を可能にするものはどれも仰々しく感じられます。テキストエリアをiframeなどで置き換える形で提供されるのでAjaxなどとの相性が良くない場合もあります。

ちょっとした文字装飾だけ行えればいいという場合にはjQuery.overlayを使ってみてはいかがでしょう。シンプルな文字装飾ライブラリです。

jQuery.overlayの使い方

こちらがデモです。テキストエリアなのに背景色が。
こちらがデモです。テキストエリアなのに背景色が。

下にある正規表現にマッチするならタイピングするタイミングで背景色がつきます。
下にある正規表現にマッチするならタイピングするタイミングで背景色がつきます。

タネはテキストエリアの文字位置に重なるように別なspanタグが生成されるようになっています。
タネはテキストエリアの文字位置に重なるように別なspanタグが生成されるようになっています。

正規表現で条件がつけられるので、@を使った送信先指定の他、メールアドレスやURLなどを装飾するのに使えそうです。また、設定はCSSなので色だけでなく様々な装飾に使えるでしょう。

jQuery.overlayはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

jQuery.overlay

yuku-t/jquery-overlay

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2