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

Losing text after a space setting the value in a new field

本文关键字：空格 文本 设置 新字段 字段      更新时间：2023-09-26

我在使用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作为值放入字段中。但是，我已经使用了alert，并且可以确认$('#firstName').text();确实包含完整的David E。如何确保空格后的文本不会被剪切掉？

问题是因为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来完全避免字符串串联，但请注意，这在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属性来包含元素所需的元数据。

这是一个逻辑错误，原因是您给出的值周围缺少引号。

您将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>");
相关文章：