2014年10月11日

jQuery JapaneseMonospace Pluginについて

jQuery JapaneseMonospace Plugin

このプラグインは日本語の等幅を代替します。

Internet Explorer と UTF-8 の組み合わせで、テキストボックス内の文字を等幅にできるように(入力文字数を視覚的に意識させたいため)、cssや色々な等幅フォントを試しましたが、完全には実現できませんでした。
(Internet Explorer と Shift_JIS の組み合わせでは実現できましたが。)
また、 Internet Explorer 依存の禁則処理を無効にできないことも踏まえて、インクリメンタルプレビュー(=編集中の文字列をポップアップ表示する)方式にて実現させました。
このインクリメンタルプレビューでは、等幅であれば本来折り返す位置で改行するようにしました。
(Internet Explorer では line-break などを指定しても、禁則処理を無効にできませんでした。
また、 Google Chrome では word-break:break-all; を指定すると、禁則処理を無効にできました。)

なお、Web上で、他にも打開策を求められている方がいらっしゃったため、プラグイン化しておきます。

2014.10.15 追記
複数ブラウザに対応させたい場合、結局、<textarea> の cols 、 (styleの)width などでは、入力文字数を完全に統一させることはできませんので、このプラグインをご活用いただけると思います。

2014.12.11 追記
スクリーンショット :
japanese_monospace.jpg

リポジトリ(GitHub) :
https://github.com/criticalbreak5/japanese_monospace
https://github.com/criticalbreak5/japanese_monospace/archive/master.zip

2014.12.10 追記
API仕様 :
[ $({対象テキストエリア}).japanese_monospace() ]
日本語の等幅を インクリメンタルプレビュー(=編集中の文字列をポップアップ表示する)方式にて 代替する。
引数必須説明
第1Objectオプション情報。
オプション必須説明
"preview-control-id"String-インクリメンタルプレビュー制御(textarea element)ID。
id属性とイベント属性以外の各属性値は、対象テキストエリアの属性値を引き継ぐ。
なお、本オプションを指定しなかった場合は、"preview_control_id" が適用される。
"preview-control-relative-top"String-インクリメンタルプレビュー制御の 上からの配置位置(相対配置) 。
なお、本オプションを指定しなかった場合は、"0px" が適用される。
"preview-control-relative-left"String-インクリメンタルプレビュー制御の 左からの配置位置(相対配置) 。
なお、本オプションを指定しなかった場合は、"0px" が適用される。
"preview-control-override-width"String-インクリメンタルプレビュー制御の 幅 。
なお、本オプションを指定しなかった場合は、対象テキストエリアのwidth属性値が適用される。
"preview-control-override-height"String-インクリメンタルプレビュー制御の 高さ 。
なお、本オプションを指定しなかった場合は、対象テキストエリアのheight属性値が適用される。
"preview-control-line-length"String-インクリメンタルプレビューの 1行あたりの表示文字数 。( 半角文字 は 1 、全角文字 は 2 として換算する。)
なお、本オプションを指定しなかった場合は、"100" が適用される。
"focus-background-color"String-フォーカスイン時(=編集中)の対象テキストエリアの 背景色 。
なお、本オプションを指定しなかった場合は、"#FFFFFF" が適用される。
"blur-background-color"String-フォーカスアウト時の対象テキストエリアの 背景色 。
なお、本オプションを指定しなかった場合は、"#FFFFFF" が適用される。
"delay"String-インクリメンタルプレビューの 遅延時間(単位:ミリ秒) 。
なお、本オプションを指定しなかった場合は、"1000" が適用される。

戻り値必須説明
----


使用法 :

posted by red at 00:26| Comment(0) | TrackBack(0) | JavaScript(jQuery Plugin) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック