0

リンクがクリックされたときに返す必要があるhtml構造をjavascriptで書いています。

  return '<div class="contactForm">'+
'<input type="text" name="contactName" onBlur="if (this.value == "") {this.value == "Name";}" onFocus="if ((this.value == "") || (this.value == "Name")) {this.value = "";};" value="Name" style="">'+

ページで見ると、onBlur属性が赤色で表示され、引用符が正しく配置されていません。ページではこのように表示されます。

   <input name="contactName" onblur="if (this.value == " ")="" {this.value="Name" ;}"="" onfocus="if ((this.value == " ||="" (this.value="=" "name"))="" ;};"="" value="Name" style="" type="text">

HTML ページで正しく表示されるように、戻り部分を記述するにはどうすればよいですか?私は、引用符が間違って配置されていることが原因だと考えています。

4

2 に答える 2

2

文字列内の引用符を\\\で二重にエスケープする必要があります。1回は文字列自体用で、もう1回はインラインJavaScript用です。

return '<div class="contactForm">'+
    '<input type="text" name="contactName" onBlur="if (this.value == \\\"\\\") {this.value == \\\"Name\\\";}" onFocus="if ((this.value == \\\"\\\") || (this.value == \\\"Name\\\")) {this.value = \\\"\\\";};" value="Name" style="">'+

もう少し読みやすくしたい場合は、一度だけエスケープする必要がある一重引用符を使用できます。

return '<div class="contactForm">'+
    '<input type="text" name="contactName" onBlur="if (this.value == \'\') {this.value == \'Name\';}" onFocus="if ((this.value == \'\') || (this.value == \'Name\')) {this.value = \'\';};" value="Name" style="">'+
于 2013-03-22T06:20:42.097 に答える
1 
var element = '<div class="contactForm">';
element += '<input type="text" name="contactName" onBlur="if (this.value == \'\') {this.value == \'Name\';}" onFocus="if ((this.value == \'\') || (this.value == \'Name\')) {this.value = \'\';};" value="Name" style="">';
element += '</div>';

return element;
于 2013-03-22T06:21:45.110 に答える