問題與報價，同時在JavaScript

Question

我寫在javascript一個HTML的結構，我需要返回時，鏈接clicked.I編寫HTML有它這樣的

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頁面？我相信這是由於報價讓misplaced.I在頁面的源代碼查看這個錯誤看到報價的預期時屬性名稱

Answer 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="">'+ 

Answer 2

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;