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)

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.

Why does the value in input (#datalist-input) remove the space at the end when selecting the value from the datalist?
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 link, that removes the space: 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

回答1:

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.

This behaviour is specified in the HTML specification

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.

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

option . text
Same as textContent, except that spaces are collapsed.

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}">`);

来源：https://stackoverflow.com/questions/45242561/why-does-a-space-at-the-end-of-a-value-disappear-when-selecting-an-item-from-a-d

标签

javascript

jquery

html

html-select