- ベストアンサー
『`』がテキストタイプのvalueにある場合にhiddenを追加すると表示が崩れる
言葉では説明できないためコードを記載致しました。 下記のコードでボタンを押下した場合に表示が崩れるのは何故でしょうか？（IE6,IE7で確認） 又、対策としてはどのような事が考えられるでしょうか？（『`』を入力禁止以外でお願い致します。） 尚、innerHTMLをalertで出すとうまく追加されていないようです。。。 よろしくお願い致します。 <html> <head> <script> function createhidden( name, value, formname ){ str = '<input type="hidden" name="aaa" value="bbb"/>'; document.forms[0].innerHTML += str; } </script> </head> <body> <form action="" name="form1"> <input type="text" name="b"value="`"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden()"/> <input type="text" name="a"value="`"/><br><br> </form> </body> </html>
- tetuya120
- お礼率70% (45/64)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE6で挙動を確認しました。 まずIEは、属性値の引用符として、シングルクオテーションとダブルクオテーシ ョンの外に、質問者さんが属性値として使用されたバッククォートも使えるよう です。 質問さんのコードですが、innerHTMLで内容を取得した場合、属性値のダブルクオ テーションが取り払われ、以下のようになるみたいです。 <input type=text name=b value=`/><br><br> <input type=button value="CREATE HIDDEN" onclick=createhidden()/> <input type=text name=a value=`/><br><br> CREATE HIDDENは中に半角スペースがあるので、ダブルクオテーションは取り払わ れません。 さて、先述しましたように、IEではバッククォートも属性値の引用符として働き ますので、最初のinput要素のvalue属性値は、バッククォートからバッククォー トとなり、 `/><br><br> <input type=button value="CREATE HIDDEN" onclick=createhidden()/> <input type=text name=a value=` が、その属性値になってしまいます。 これが表示が崩れる原因ではないかと思います。 対策としては、以下のように実体参照を使われるのはいかがでしょうか？ <input type="text" name="b"value="´"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden()"/> <input type="text" name="a"value="´"/><br><br>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
innerHTMLをいじるからですね・・・ こんな風にしてみてください <html> <head> <script> function createhidden(f){ var el=document.createElement("input"); el.setAttribute("type","hidden"); el.setAttribute("name","aaa"); el.setAttribute("value","bbb"); f.appendChild(el); } </script> </head> <body> <form action="" name="form1"> <input type="text" name="b"value="`"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden(this.form)"/> <input type="text" name="a"value="`"/><br><br> </form> </body> </html>
お礼
当初はyambejpさんのようにhiddenを作成していたのですが、IEが動的にnameを変更できないことが原因でうまく動作しないという経緯があり、innerHTMLを使用していました。 ↓参考 http://oshiete1.goo.ne.jp/qa5378877.html 少し改良して↓という形で実現したいと思います。 ありがとうございました。 function createhidden(f){ var el = document.createElement('<input name="aaa">'); el.setAttribute("type","hidden"); el.setAttribute("value","bbb"); f.appendChild(el); }
お礼
なるほど。。。 innerHTMLで内容取得の際に半角スペースがないとダブルクオーテションが取られるという所がポイントということですね。 これによってバッククォートが生きてきてしまうためおかしなことになると。 今回の場合、テキストボックスの値は動的に出力しているため実体参照処理を行なうのは困難なんです。。。 回答ありがとうございました