Question

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

我可以确保最后的空格包含在内最终结果是将其分配给值属性，而不是在<option>和</option>标记之间。 JSFiddle有效。

为什么输入（＃datalist-input）中的值会删除空格从数据列表中选择值时的结束？
我应该使用<option>和</option>标签之间的空格吗？如果是这样，那该怎么做。如果不是，为什么不是，为什么<option>标签只有在这种情况下才会自我关闭？

JSFiddle链接，删除空格： JSFiddle

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

Answer 1

只要您在选项文本中有前导或尾随空格，并且没有值属性，就会发生这种情况。

选项的文本用作值，并且会删除空格。

此行为在HTML specification

中指定

value属性为元素提供值的价值 option元素是值content属性的值，如果有的话是一个，或者，如果没有，则是元素text IDL的值属性。

请注意，它只是说该值与＆＃34;文本IDL＆＃34;相同。如果没有设置值，但对于选项，＆＃34;文本IDL＆＃34;指定如下

选项。文本
与textContent相同，除了空格已折叠。

它明确指出在获取＆＃34;文本IDL＆＃34;时，空格会崩溃。如果元素上没有设置此类属性，则用于设置value属性，因此这是预期的行为。

以下是一个示例，显示了将文本用作值以及具体添加值属性之间的区别：

＆＃13;
＆＃13;
var t1 = $('#test1 option').get(0), t2 = $('#test2 option').get(0); console.log( t1.value, t1.value.length ); // length === 10 console.log( t1.textContent, t1.textContent.length ); // length === 12 console.log( t2.value, t2.value.length ); // length === 22 console.log( t2.textContent, t2.textContent.length ); // length === 22 /* The option where the text is converted to a value property has a difference in length, the whitespace is trimmed. The option whith a value attribute, where the text isn't used for the value property, keeps the whitespace, and the length is the same */
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="test1"> <option> has spaces </option> </select> <select id="test2"> <option value=" has spaces and value "> has spaces and value </option> </select>
＆＃13;
＆＃13;
＆＃13;

这种情况下的解决方案是添加值

$("#datalist").append(`<option value="${originalInput}">`);

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

1 个答案: