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.

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

Can't dynamically modify the placeholder text #281

Open
RustyTheBoyRobot opened this issue Dec 2, 2015 · 3 comments
Open

Can't dynamically modify the placeholder text #281

RustyTheBoyRobot opened this issue Dec 2, 2015 · 3 comments

Comments

@RustyTheBoyRobot
Copy link

placeholder version: 2.3.0
jQuery version: 1.10.2
Browsers: IE 7-9 (couldn't test 6)

Reproduction Steps:

  1. Open the demo page in IE 10: https://mathiasbynens.github.io/jquery-placeholder/
  2. In the Javascript Console, run this: $("[name=search]").attr("placeholder", "Changed!");. Notice that the first text box has the placeholder text of "Changed"
  3. Open the demo page in IE 9 or older
  4. In the Javascript Console, run this: $("[name=search]").attr("placeholder", "Changed!");. Notice that the first text box's placeholder text is unchanged.

This also means that the placeholder text will not get cleared out on focus, since the value does not match the placeholder attribute value.

If this functionality is outside of the scope of this plugin, so be it. I just didn't see anything in the documentation that says that you can't do this.

@RustyTheBoyRobot
Copy link
Author

This seems to be working for me as a workaround:

    function changePlaceholderText(element, text)
    {
        var $element = $(element);
        var currentVal = $element.val();

        var needsInputFix = ($element.is("input") && !$.fn.placeholder.input);
        var needsTextAreaFix = ($element.is("textarea") && !$.fn.placeholder.textarea);

        $element.attr("placeholder", text);
        if (currentVal === "" && (needsInputFix || needsTextAreaFix))
        {
            $element[0].value = text;
        }
    }

It simply modifies the DOM element's value to match the new placeholder text so that the onfocus code will strip out the text correctly.

@cailingling
Copy link

I also encountered this problem, how to solve

@myadzel
Copy link

myadzel commented Jul 27, 2016

You can change placeholder value this way:

var currentInputValue = $element.val();
$element.attr("placeholder", "new placeholder value").val(currentInputValue);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants