javascript - 在新字段中设置值的空格后丢失文本

Question

我在使用 Javascript 创建新字段时遇到了一个奇怪的问题。我有一个按钮，单击该按钮将创建两个文本字段。我给那些文本字段一个字符串作为值。但是，只有在我给它一个没有空格的字符串时它才能正常工作。如果我的字符串包含一个空格，那么它会使值等于空格出现之前的文本。

function nameField() {
  $('#nameArea').html("<br/>First Name:<input type='text' id='fnField' value=" + $('#firstName').text() + ">Last Name:<input type='text' id='lnField' value=" + $('#lastName').text() + "></input><button id='bName' onclick='updateName(fnField.value, lnField.value)'>Save Changes</button>");
  $('#firstName').html("");
  $('#lastName').html(""); 
}

因此，例如，如果 firstName 值为 David E，则当前仅将 David 作为值放入字段中。但是，我已经使用了警报并且可以确认 $('#firstName').text(); 确实包含完整的 David E。我怎样才能确保空格后的文字不会被删掉？

Answer 1

问题是因为 value 周围没有任何字符串定界符。请注意此示例中属性值周围的双引号 ("):

$('#nameArea').html('<br/>First Name:<input type="text" id="fnField" value="' + $('#firstName').text() + '">Last Name:<input type="text" id="lnField" value="' + $('#lastName').text() + '"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>');

或者，您可以使用模板文字完全避免字符串连接，但请注意，IE 不支持这种做法。

$('#nameArea').html(`<br/>First Name:<input type="text" id="fnField" value="${$('#firstName').text()}">Last Name:<input type="text" id="lnField" value="${$('#lastName').text()}"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>`);

最后，您可以通过删除 onclick 属性并改用不显眼的事件处理程序来进一步整理此 HTML。您可以使用 data 属性在元素中包含必要的元数据。