Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use placeholder attribute on input elements for placeholder text (instead of value attribute) #3133

Open
jenlampton opened this issue Aug 15, 2022 · 1 comment · May be fixed by #3134
Open

Use placeholder attribute on input elements for placeholder text (instead of value attribute) #3133

jenlampton opened this issue Aug 15, 2022 · 1 comment · May be fixed by #3134

Comments

@jenlampton
Copy link

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.
jenlampton pushed a commit to jenlampton/chosen-1 that referenced this issue Aug 15, 2022
Issue harvesthq#3133: Use placeholder attribute for placeholder text.
2e8359a
@jenlampton jenlampton linked a pull request Aug 15, 2022 that will close this issue
Open
5 tasks
@juanolalla
Copy link

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');
        }
      });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Issue #3133: Use placeholder attribute for placeholder text. jenlampton/chosen-1
2 participants
@juanolalla @jenlampton