« 景気がいいぞ、旅に出よう! てホントかよ。 | トップページ | Google日本語入力で baka と入力すると… »

2013.07.23

<メモ>IE6、7、8向けHTML中の改行コードを BRタグに置換する方法。

いまだに InternetExplorer( IE )のバージョン8以前に対応しなきゃいけないコト自体が間違っているんだと思うけど、現実に要望があるので捨て置くわけにはいかない。

現場から、「HTML中のテキストが平文で CMS から出力されるので、文中の改行に brタグを付けてブラウザで見た時にきちんと改行されているようにしたい」というのがやってきた。

CMS で br つければいいじゃん? と思うわけだが、平文テキストは HTMLタグを知らないいわゆる“一般ユーザ”がやるので行末に br をつけるという運用はあり得ないとのこと。いっぽう CMS の仕様は「データの入力は HTMLで」とウェブの知識が前提となっているらしい。システムと運用で齟齬が起きているわけだ。その段差を JavaScript のチカラで何とか……、ということらしい。

すぐに思いつくのは、JavaScriptの replace() を使えばいいじゃん? ということになるが、ここに厄介な条件がつく。

「IE7でも見えるようにしてください」

もう脊髄反射的に「IE7 乗り入れ禁止ぃっっ!」と叫びたくなるわけだが、いくら叫んだり祈ったりしたところで何も変わらない。なので、戦うことにした。

ポイントだけ書いてしまうと、
・古い IEは HTML中の改行コードを無視するらしい。
・しかし textarea内の値では改行は生きている( そりゃそーだ )。

なので、対策として次のようにした。取り敢えずこれで解決。


  1. 不可視な textarea を用意する。

  2. CMS は平文テキストを textarea に流しこむ。

  3. 流し込まれたテキストを JavaScript で replace( /¥n/g, '<br>' ) する。

  4. その結果を、本来のテキスト位置に innerHTML でセットしてやる。

万が一 JavaScript がうまく動かない環境だったら「本来のテキスト位置」が空白になりお客さん(ユーザ)がビックリするので、CMS では textarea と同時に「本来のテキスト位置」にも平文テキストを流しこんでおけばいいだろう。改行されていない状態だけど、それらしい何かが見えている線は確保できる。

preタグや readonly な textarea でいいかな、とも思ったんだけど、現場によるとそれらの方法では表示レイアウトがダメということだった。なので、現時点での最善の対策は以上のようなものになった。

もしかしたらもっと良い手が見つかるかもしれないけど、その前に IE8以前は撲滅しようネ。


« 景気がいいぞ、旅に出よう! てホントかよ。 | トップページ | Google日本語入力で baka と入力すると… »

ウェブページ

フォト

hide module-header

redirect to tafworks.com

GglAnlytcs