Question

我在javascript中编写一个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页面中正确显示？我认为这是由于引号错位。我在页面源中看到此错误在期望属性名称时看到了引号

Answer 1

你需要使用\\\：对字符串内部的引号进行双重转义：对于字符串本身一次，对于内联JavaScript一次。{/ p>

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;

在javascript中编写html时引用问题

2 个答案: