问题与报价，同时在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;