[雑記] inputタグのvalueにおける、スペースの扱い

こんばんは。
仕事納めのおじいさんです。
今年の冬は大型連休で九連休。しっかりと体を休ませておきたいなあー、なんて考えてます。
さて、それはともかく、昨日F先輩に「こういう事は周知しておいてね」と言われたので書いときます。
実際ん所、今日は仕事納めで暇がなくて、同僚K氏に説明しそこねたってだけなんですがね。
それはinput タグのvalueに値を入れる際のHTMLエスケープの話です。

CGIでHTMLを表示するアプリを作る時には、HTMLエスケープするのはまあ常識だと思います。
その際に変換する事が多いのは、
 ・< を &lt;
 ・>を &gt;
 ・"を&quot;
 ・&を&amp;
と、
 ・スペースを&nbsp;
へ変換する事が多いのではないかと思います。
最後のは、スペースをそのまんましておくと、一つにまとめられちゃったり、不用意な所で改行されたりするのを防止するためなんですが。

さて、ここで問題です。

 問題1:HTMLのinputタグのvalueに&lt;を入れた場合、一体ブラウザからは何が送られてくるのか?
    タグとしては<input type="text" value="&lt;">のような動きとします。

 答え2:"<"が送られてきます。正確に書けば、%3C、つまりパーセントエスケープされていますが。


 問題2:HTMLのinputタグのvalueに手でスペースを入力した場合、一体ブラウザからは何が送られてくるのか?
    タグとしては<input type="text" value="">のようなものに、スペースをキーボードから入れたものとします。

 答え2:+記号が送られてきます。これをスペースに変換すればいい。

ここまではフツーのことだと思いますが、次の問題をどうぞ。

 問題3:HTMLのinputタグのvalueに&nbsp;を入れた場合、一体ブラウザからは何が送られてくるのか?
    タグとしては<input type="text" value="&nbsp;">のような動きとします。

 答え3:IEの場合、&nbsp;が、FFの場合は&#160;が送られてきます。
    もちろん、これも記号はパーセントエスケープされています。

これはうっかり忘れちゃう人がいるんじゃないかと思います。
なぜという問いに答えを簡単に書けば、スペースと、&nbsp;つまりnon-breaking-spaceというのはやはり別物であるという事になります。それをちゃんとブラウザが別として扱っている。

まず最初にvalueの中身なんですが、CDATAです。

 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.4

で、CDATAというのは、文字実体は文字で置き換えます。

 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-cdata

RFCを読んでいると、value=" abc "をvalue="abc"としてもよい、と書かれていますが、FF3、IE8βで試す限り問題ありません。されるとどう考えても困るんで、普通していないはずです。
さて、脱線しましたが、重要な事は、実体参照は文字で置き換えて表示するという事です。
実体参照の定義は以下になります。

 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/sgml/entities.html

これを読むと、nbspはnon-breaking spaceであり、&#160と等価である事がわかります。だから、FFで&#160が送られてくるわけなんです。
ついでに言えば、ltは&#60と等価。
つまり、ltはASCIIコードの"<"とちゃんと対応していますが、nbspはASCIIコードのスペースとは対応していない。

要するに、&nbsp;はレンダリングされたテキストボックス中ではスペースのように見えるわけですが、やっぱりスペースではないんです。

以上の理由から、input タグのvalue値にスペースを入れる時に、スペースを&nbsp;へ変換してはいけませんよ。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

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