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>');

或者，您可以使用Template Literal完全避免字符串连接，但请注意，这不受支持

$('#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属性来包含元素所需的元数据。

Answer 2

这是由于您提供的值周围缺少引号而导致的逻辑错误。

您将html设置为value=First Lastname而不是value='First Lastname'。在第一种情况下，大多数浏览器将字符串解析为空格，因此只显示第一个名称。

尝试

$('#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>");

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

2 个答案: