当从数据列表中选择项目时，为什么值末尾的空格会消失？ [英] Why does a space at the end of a value disappear when selecting an item from a datalist?

问题描述

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

I ran into a curious issue where the space at the end of a value disappears, when using a datalist. It left me wondering why. (I am using google chrome)

我可以通过将结果空间分配给值属性来确保结尾的空格将包含在
的最终结果中而不是在< option> 和< / option> 标签之间。有效的 JSFiddle 。

I can make sure that the space at the end will be included in the end result by assigning it to a value attribute, instead of inbetween the <option> and </option> tags. JSFiddle that works.

1. 为什么输入中的值（＃datalist-input）会在选择时结束时删除
   处的空格来自datalist的价值？


2. 我应该使用< option> 和<$之间的空格c $ c>< / option> 标签呢？如果是这样，那该怎么做。如果不是，为什么不是，为什么不是< option> 标签只有在这种情况下自我关闭？

1. Why does the value in input (#datalist-input) remove the space at the end when selecting the value from the datalist?
2. Should I use the space inbetween the <option> and </option> tags at all? If so, what for. If not why not and why isn't the <option> tag selfclosing only if this is the case?

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

推荐答案

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

This happens any time you have leading or trailing whitespace in the text of an option, and no value attribute.

选项的文本用作值，并且空白被修剪掉。

The text of the option is used as the value, and whitespace is trimmed off.

此行为在HTML 规范

值属性为元素提供了一个值。


选项元素的值是值content属性的值，如果
是1，或者，如果有不是，元素的值 text IDL
属性。

The value attribute provides a value for element.
The value of an option element is the value of the value content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute.

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

Note that it just says the value is the same as the "text IDL" if no value is set, but for options the "text IDL" is specified as follows

选项。 text

与textContent相同，除了空格已折叠。

它特别指出，如果在元素上没有设置此类属性，则获取用于设置value属性的text IDL时会占用空格，因此这是预期的行为。

It specifically says that spaces are collapsed when getting the "text IDL" that is used to set the value attribute if no such attribute is already set on the element, so this is the expected behaviour.

这是一个示例，显示将文本用作值，并特别添加值属性之间的区别：

Here's an example showing the difference between letting the text be used as the value, and specifically adding a value attribute :

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
*/

<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>

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

The solution in this case would be to add a value

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

这篇关于当从数据列表中选择项目时，为什么值末尾的空格会消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！