Why does the space at the end of the value disappear when I select an item from the data catalog?
I ran into a curious issue where the space at the end of the value disappears when using a datalist. I wondered why. (I am using google chrome)
I can make sure that the space at the end will be included in the final result by assigning the value attribute to it, and not between the <option>
and tags </option>
. JSFiddle that works.
- Why does the input value (# datalist-input) remove space at the end when selecting a value from datalist?
- Should I use a space between tags
<option>
and</option>
? If so, why. If not, why not, and why doesn't the tag<option>
self-close, only if it does?
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
source to share
This happens anytime there are leading or trailing spaces in the parameter text and there is no value attribute.
Option text is used as the value and the space is truncated.
This behavior is specified in the HTML specification
The attribute
value
provides a value for an element.
Value The option element is the value of the content value attribute, if it is one, or, if not, the value of thetext
IDL attribute element .
Note that it simply says that the value is the same as "text IDL" if no value is specified, but for parameters "text IDL" is specified as follows
... text
Same as textContent, except that spaces are stripped .
It specifically states that spaces are stripped when a "textual IDL" is received that is used to set the value attribute if no such attribute is already set on the element, so this is expected behavior.
Here's an example showing the difference between being able to use text as a value and in particular 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>
In this case, the solution would be to add the value
$("#datalist").append(`<option value="${originalInput}">`);
source to share