chosen
chosen copied to clipboard
Use `placeholder` attribute on input elements for placeholder text (instead of `value` attribute)
Chosen puts the Placeholder text into the value
attribute on the input elements, instead of in the placeholder
attribute. It still renders as though it was a placeholder.
I'm using the localize.js service for translation on several websites. This service specifically searches for placeholder attributes and translates those, so that all visible text on the page can be translated. The localize script is not able to recognize the placeholder text, because it's not in the placeholder attribute, so these values are not properly translated.
Is there some reason the placeholder
attribute was not used for its intended purpose? Does the placeholder
attribute not work as expected?
I would like to propose that Chosen switch back to using attributes as they were intended to avoid this problem, and similar conflicts with other projects or systems that are expecting standard markup.
While this is fixed in Chosen, here is an external solution I developed for my project:
// Set placeholder instead of value for chosen select data-placeholder.
// @see https://github.com/harvesthq/chosen/issues/3133
$('select').on('chosen:ready', function (e) {
var placeholder = $(e.target).attr('data-placeholder');
if (placeholder) {
var input = $(e.target).next('.chosen-container').find('.chosen-search-input');
input.attr('placeholder', placeholder);
input.val('');
input.removeAttr('value');
}
});