RIAトピックス
リッチクライアント/RIAを主テーマに取り扱います。Flex、Ajax、AIR、Silverlight、JavaFX、etc。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Javascript】IEのinnerHTML挙動と`(バッククォート)について
innerHTMLはオブジェクト内のHTMLを書き換える事が可能なため割とよく使われますが、ブラウザによって挙動が違ったりします。
今回これにはまったのでメモ。

解説の前にソースです。

~~~ここから~~~
<html>
<head>
<script>
function testfunc(){
document.forms[0].innerHTML = document.forms[0].innerHTML;
}
</script>
</head>
<body>
<form action="" name="form1">
<input type="text" name="b"value="`"/><br>
`
<input type="button" onclick="testfunc()" value="CLICK ME"/>
</form>
</body>
</html>
~~~ここまで~~~

あからさまに怪しい所がありますが、特に問題になるような感じはないと思います。
ところが、これをIEで開いてボタンをクリックすると。。。

クリック前

↓クリック

クリック後

こんな感じでHTMLが崩れてしまうんです。
サンプル↓(IE6、7、8で確認済み)
http://jsbin.com/ejacu

以下解説
IEではバッククォートはダブルクォーテーションやシングルクォーテーションと同様に属性の引用符として使用することができます。
↓こんな感じ
<input type=`text` name=`c` value=`value` />

で、今回の場合innerHTMLで値を取得した際に"が全て取られます。
そのため、再度挿入時にバッククォートが属性引用符として判断されておかしな事になってしまっているようです。
IDやnameにバッククォートが入る事はないでしょうから、valueにバッククォートが入る場合には注意が必要だと思われます。

しかし、この事についてWebで情報が見つからなかったのは何故!?

K.Y
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005 RIAトピックス all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。