Javascript 为什么从数据列表中选择项目时，值末尾的空格会消失？

我遇到了一个奇怪的问题，在使用数据列表时，值末尾的空格消失了。这让我想知道为什么。（我正在使用谷歌浏览器）

我可以确保末尾的空间将包含在 通过将其指定给值属性，而不是

和

标记之间的值属性，可以获得最终结果。这很有效

为什么输入中的值（#datalist input）会在 从数据列表中选择值时结束？

我是否应该使用

和

标记之间的空格？如果是，原因是什么。如果不是，为什么不关闭？如果是这样，

标记为什么不自动关闭？

jsiddle链接，删除空格：

html

<h3>The disappearing of a space at the end of a line</h3>
<input id="input" type="text" value="Space at the end " disabled="true">
<datalist id="datalist"></datalist>
<input id="datalist-input" list="datalist">
<h6>(select the only option in the datalist and click somewhere to trigger the script)</h6>

一行末尾的空格消失
（选择数据列表中的唯一选项，然后单击某个位置以触发脚本）

javascript/jQuery

let originalInput = $("#input").val();
$("#datalist").append(`<option>${originalInput}</option>`);
$("#datalist-input").change(function () {
    let datalistText = $("#datalist-input").val();
    if(datalistText !== originalInput) {
        alert(`The original value: "${originalInput}" is not equal to: "${datalistText}"`);
    } else {
        alert(`The original value: "${originalInput}" is equal to: "${datalistText}"`);
    }
}); // end change

let originalInput=$（“#input”）.val（）；
$（“#数据列表”）.append（`originalInput}`）；
$（“#数据列表输入”）.change（函数（）{
让datalistText=$（“#datalist输入”）.val（）；
如果（datalistText！==originalInput）{
警报（`原始值：${originalInput}不等于：${datalistText}`）；
}否则{
警报（`原始值：${originalInput}等于：${datalistText}`）；
}
}); // 换头

当选项的文本中有前导或尾随空格且没有值属性时，就会发生这种情况

该选项的文本用作值，并删除空白

此行为在HTML中指定

value

属性为元素提供一个值。
价值 option元素是value content属性的值（如果有） 是元素的

text

IDL的值，如果没有，则为一 属性

注意，如果没有设置值，它只是说该值与“text IDL”相同，但是对于选项，“text IDL”的指定如下

选项。文本
与textContent相同，不同之处在于空格是折叠的

它特别指出，如果元素上没有设置值属性，那么在获取用于设置值属性的“文本IDL”时，空格将被折叠，因此这是预期的行为

下面的示例显示了将文本用作值与特别添加值属性之间的区别：

var t1=$（“#test1选项”）.get（0），
t2=$（“#test2选项”）.get（0）；
console.log（t1.value，t1.value.length）；//长度===10
console.log（t1.textContent，t1.textContent.length）；//长度===12
console.log（t2.value，t2.value.length）；//长度===22
console.log（t2.textContent，t2.textContent.length）；//长度===22
/*
文本转换为值属性的选项在长度上存在差异，空白将被修剪。
带有value属性的选项（其中文本不用于value属性）保留空白，且长度相同
*/

有空间
有空间和价值

@adeneo将datalist标记更改为html select。假设这更准确：）。您不在数据列表中使用值的原因是什么？html标记中的前导/尾随空格被忽略。@epascarello似乎建议您不必使用value标记。问题是为什么innerText与值的处理方式不同。如果我们应该使用innerText，或者将选项标记视为不带innerText的自动关闭标记。但是如果您关心空格，则需要使用value属性。interest。W3C似乎自相矛盾：在注释中建议您可以使用option标记而不使用任何属性。我想这只是部分正确。我会考虑问题1。但是如果我使用DATALIST，你的代码将在Chrome中的下拉列表中输出2个值（在DATAIST中，而不是SELECT）；这就留下了一个问题，我们应该使用选项标记的textContent，还是始终使用value属性而不使用textContent，并且基本上将选项标记视为自关闭标记更好？您可以使用不带value属性的选项标记，但正如规范所述，这样做时空格将被折叠。您是对的，当同时使用值和文本时，它们都显示在数据列表中，这意味着您应该使用其中一个。确实会将文本或值显示为有效，但同样，仅使用文本时，转换为值时将修剪空格。