jamesallardice / placeholders.js Goto Github PK

IE8 hides text of password. I rather think it should not show it at all as it is very confusing for the user. One can chose to remove password from validTypes array, but then it does not work for IE9 either.

My solution was to modify showPlaceholder like this to make a check if it was possible to change type of password to text.

I basicly moved to "set value" part to after the changeType was called. If changeType fails the method returns false instead and never sets the value.

function showPlaceholder(elem) {
        var type,
            maxLength,
            val = elem.getAttribute(ATTR_CURRENT_VAL);
        if (elem.value === "" && val) {

            // If the type of element needs to change, change it (e.g. password inputs)
            type = elem.getAttribute(ATTR_INPUT_TYPE);
            if (type) {
                elem.type = "text";
            } else if (elem.type === "password") {
                if (Utils.changeType(elem, "text")) {
                    elem.setAttribute(ATTR_INPUT_TYPE, "password");
                }
                else
                {
                    return false;
                }
            }


            elem.setAttribute(ATTR_ACTIVE, "true");
            elem.value = val;
            elem.className += " " + placeholderClassName;

            // Store and remove the maxlength value
            maxLength = elem.getAttribute(ATTR_MAXLENGTH);
            if (!maxLength) {
                elem.setAttribute(ATTR_MAXLENGTH, elem.maxLength);
                elem.removeAttribute("maxLength");
            }



            return true;
        }
        return false;
    }

If using focus and blur to hide/show placeholder text rather than keydown Escape is not considered a bad key and there is no keypress handler. This allows IE to perform its default behavior clearing form text then if you tab into the password field anything you type will be clear text.

Your gist appears to use the keydown event listener which behaves better as it does preventDefault on pressing the escape button.

when using jQuery $('input[placeholder]').val() it returns the place holder text.
this is bad for scripts that depend on val() returning an empty string

In IE versions less than 9, the password placeholder fields are replaced with dots, instead of the placeholder text. When this happens, it looks like the password box is already filled in.

Basically, instead of "Enter Password" you'll see "**************".

I have confirmed this behavior when using IE9 in IE8 mode as well as standard IE7 and IE8 browsers using http://www.browserstack.com/.

Hi James,

Thanks for this awesome script, this is very usefull (even in IE8, :D)!

Is there any forecast for convert this script in a jquery plugin?

Regards,
Giolvani

Would be nice, if native browsers could be forced to use Placerholders.js. In that way users whould be able in use options such as keeping placerholder on focus.

If I make the following call:
Placehoders.disable()

I get a JS error which in IE9 reads "Unable to get property 'length' of undefined or null reference"

The ultimate cause is here:
// If an element was passed in, get all affected descendants. Otherwise, get all affected elements in document
inputs = node ? node.getElementsByTagName("input") : inputs;
textareas = node ? node.getElementsByTagName("textarea") : textareas;

Outer inputs and textareas variables are shadowed by the variables declared in a function so there is no way to access them and because of this if there is no node passed in, the same value the variables had (undefined) is assigned back to them.

It does not work on IE 8 for Password field. Even the test link does not. The password place holder is shown as ******.

http://jamesallardice.github.io/Placeholders.js/

If your form has input type="reset" button, clicking on this removes all the placeholders - they only reappear onblur.

This is obviously a bug, but I suppose #resetbutton.onclick=Placeholder.init or similar should fix it pretty easily.

Thanks.

I'm developping an App in IE8 with yui3.
With the onblur event of an input node I check if the value is empty or not to act on the input...
When I use plcaeholders instead of an empty value ('')' I will get the placeholder text. (Same code works fine with IE9 and latest Chorme)

node-input.on('blur', function(e) {
    if (e.target.get('value') != '') {
        // do someting
    } else {
        // do someting else
    }
}, this);

Is there a way to deal with that situation?
Probably it is not a convenient way to wirte the placeholder text directly into the input...

Thanks for Help!
Felix

When removing the placeholder attribute from an element via JS the placeholder value is not hidden:

element.removeAttribute("placeholder");

Hi, I'm testing the polyfill in chrome 21 and it's also loading.

Checking the source, I see that you are checking for placeholder support like this:

if (!test.placeholder)

But this condition also returns true when the value of placeholder is "" (as in chrome), so even when chrome has support for placeholder it is loading the polyfill. I think the condition should be something like if (test.placeholder === undefined)

I'm using bower to download the lib and used it. But I'm not able to find the proper .js to include in my webpage. Could you please but the assets in the github repository?

I just applied this to a form I am working on and the placeholder text in input type="number" fields did not display by default. it only displayed after I selected and deselected the field or entered and removed data.

The placeholder disappears on focus instead on keypress. Congrats for the plugin

A common issue with Placeholders.js is "my DOM library method returns the value of the placeholder text instead of the empty string" (see #14 and #38 for examples).

A possible solution is to write a suite of adapters that monkey-patch the methods in question of various DOM libraries and return the empty string when appropriate, delegating back to the original method otherwise.

Libraries that should be covered:

• jQuery
• YUI
• Prototype

It would be good to have a comment in the build file with the version number, allowing to check whether an update is needed or no.
And it would be great if the website displays the latest version so that we can know about it.

Additionally, you might want to create tags for the 2.0.x releases in the repo, as you used to do for the 1.x versions.

Placeholder text currently shows as dots in a type password input. I expected the library would write the actual placeholder text instead.

As of v2.0.0, placeholders are not displayed in clear text in password inputs. This is a regression and should be fixed ASAP.

When I load a page fresh in IE9/IE8 the script works fine and displays placeholders.
If I refresh the page after it has loaded, the input fields are blank until I click into and out of them.

Has anybody else noticed this? Fix out there?

I

It seems that the placeholders.js does not work when you have data-bindings from knockout attached to the input values. The placeholders will only show up after you click on the input values...

Here is the image of HTML and the knockout bindings, after a click. but you can see that the third input is empty.

Attached is code if needed to debug and determine the cause. I will be digging into this as well to understand a solution.
You will need to add the '<' to use the below code

div id="form">
input type="email" class="input-form" placeholder="Email Address" data-bind="value: email">
span data-bind="text: email">
input type="password" class="input-form" placeholder="Password" data-bind="value: password">
span data-bind="text: password">
input type="password" class="input-form" placeholder="Confirm Password" data-bind="value: confirmpassword">
input type="text" class="input-form" placeholder="testing">
/div>

var viewModel = new Info();
var elementBindingScope = document.getElementById('form');
ko.applyBindings(viewModel, elementBindingScope);

/script>


Hi James.

We have a problem with a placeholder to a password field input in IE8. This is doesn't works very well...

Fyi... im using a symfony framework

Do you have some solution for this problem??

Thanks a lot

Caio

When the polyfill runs in "hide-on-input" mode (rather than "hide-on-focus") there is a flash of placeholder-styled text when you type the first character into the input.

This is more of a problem with password inputs, since the flash renders the first password character in plain text, rather than masking it (since the mask won't be applied until keyup).

Currently, this is not a trivial fix, but I hope to get a patch in a future version.

In Internet Explorer, placeholder texts are not being cleared when javascript code calls form.submit() on a form that contains inputs with placeholders; this is because on Internet Explorer, in contrast to other browsers, the form.submit() method does not trigger an onsubmit event, so the Placeholders.js code responsible for clearing any placeholder texts, never gets called.
I've solved this locally by modifying the addEventListener(elem, event, fn) method in Placeholders.js as follows:

// Cross-browser DOM event binding
function addEventListener(elem, event, fn) {
    if (event == "submit") {
        setupTriggerEventBeforeSubmit(elem);
    }
    if (elem.addEventListener) {
        return elem.addEventListener(event, fn, false);
    }
    if (elem.attachEvent) {
        return elem.attachEvent("on" + event, fn);
    }
}

, and adding an extra method

function setupTriggerEventBeforeSubmit(form) {
    if (! form.submit.oldsubmit) {
        var oldsubmit = form.submit;
        form.submit = function() {
            if (form.dispatchEvent) {
                var newEvent = document.createEvent("HTMLEvents");
                newEvent.initEvent("submit", true, false);
                form.dispatchEvent(newEvent);
            } else if (form.fireEvent) {
                form.fireEvent("OnSubmit");
            }
            form.submit.oldsubmit.call(form);
        }
        form.submit.oldsubmit = oldsubmit;
    }
}

Hello,

This is a small issue.

classNameRegExp = new RegExp("\\b" + placeholderClassName + "\\b")
elem.className = elem.className.replace(classNameRegExp, "");

doesn't work properly if the className is "custom-placeholdersjs placeholdersjs" because the resulting string will be "custom- placeholdersjs"

classNameRegExp = new RegExp("(?:^|\\s)" + placeholderClassName + "(?!\\S)")
seems to do the work (from http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript )

Elements that are inserted through JavaScript don't get the placeholder functionality.
It works when elements are added with jQuery, however it doesn't work on elements added through AngularJS.

Also tried triggering it manually with Placeholders.enable(element); but it doesn't work.

Hello,

Please could you clarify what licence you're releasing this under? Default under most copyright law is for no permission to do anything to be implied, so a licence would be useful.

Cheers,

Tim

In IE9 (Standards mode) the function elem.addEventListener() is available, and as such, in the handler passed to it the preventDefault() function must be called instead of returning false. Otherwise you can move cursor through placeholder text.

I'd like to request the ability to configure the placeholder options through JavaScript, instead of through data- elements on the html tag.

In IE8 (emulated), IE9 emulated works fine. Using (v3.0.1 unminified, 19kB) line 323.

When editing string in 'input' type 'text' (in the middle of the string) cursor jumps to the end of the string.

Hi! I am using placeholders for a Marketo form, which is loaded with a snippet of Javascript. Since that is a dynamic piece of content, how do I go about loading the placeholders script? Including it at the bottom of the body tag doesn't work. What happens is the placeholders briefly appear on page load, and then they disappear and the fields are blank. So I'm thinking something happens as the Marketo form loads that makes the placeholders disappear in IE7-8.

I might be doing things wrong, so apologies if that's the case.

The issue I'm having is that calling Placeholder.enable() on a browser which supports placeholders produces a fatal error, since "inputs" is never initialised.

Maybe I should check before, but I was expecting this lib to be a kind of drop-in replacement: just import, and that's all.

My quick-fix is just override enablePlaceholders() and disablePlaceholders() with empty functions when not (test.placeholder === void 0)

Using IE10 to emulate IE7 on Windows 7 causes the placeholders to not show up. A screenshot of the Placeholders site in my environment: http://puu.sh/3amKt.png

However, it seems using IE8 to emulate IE7 (on XP) works: http://cl.ly/image/450h3V2T2e2e

Hi I just implemented this on my landing page and it works like a charm. Except for one small thing:

My password placeholder is shown with only **********, because that is the default password input field behaviour.

Has anybody found a fix for that?

Currently the built script consists of 2 concatenated files, main.js and utils.js. The contents of each file is wrapped in an IIFE, which is stupid. The entire script should be wrapped in one, rather than split into 2.

The Grunt script could be updated to add this wrapper.

I wanted to override the default behavior but the code below doesn't work. It's ok in Firefox (v 14) and IE as indicated in the doc

   Placeholders.init
      hideOnFocus: true

As issue title, Placeholder with password input doesn't work on IE8 and below, the asterisk is displayed instead of placeholder text value.

I have two cases where the class is not being removed in IE9.

A field that is disabled (then made editable via jquery), on focus the placeholderjs class is not removed, and in a case where I am using Placeholders.disable(); and then Placeholders.enable(); (due to an issue I am having with another plugin) the class is added twice and then one of them is removed on focus leaving the original class so the faded text is still "greyed".

The other case I notice this is after a input box starts as being display none and then is made visible caused by javascript on a select box change, (ie other). The input is made visible but focus on the input does not remove the placeholderjs class.

I tried creating a fiddle of the issue but don't seem to be able to load in the correct js without causing an issue with the js loading? (http://jsfiddle.net/dS2ds/3/)

When typing 'First name' into 'input' type 'text' with the placeholder value 'First name', the value of input is resetting to an empty string.

Love what you have done and works great, I'm just having a small problem with one or two input's that seem to be adding HTML inside the input while using IE10.

• IE10 HTML code is visible in First Name and Last Name fields (step 2 of
  the donation form)
  https://greens.org.au/civicrm/contribute/transact?reset=1&id=298&action=.

In IE8, I am seeing placeholder text in the appropriate input elements (based on type), but not in any textareas.

In IE9 placeholder text is being submitted if no value has been entered into the input field.

This is not happening in IE8.

Would be great if you could look into this.

If you use this plugin, $(element).val() will not work. And you should clear the value on post event

On IE10, setting the data-placeholder-focus attribute to false does not result in the same behaviour as IE < 10 and Safari & Chrome. Instead the placeholder text still disappears when the input gets focus.

This is probably because IE10 purportedly supports placeholder, but losing the placeholder text on focus is part of its default behaviour.

in IE8, if placeholder is numeric this test fails
originalValue === placeholder

so custom val() ends up returning originalValue which is the current placeholder, instead of ""

testing with == works!!.

first of all - awesome plugin. i so want this to work :)

I'm using on a login-page (user|pass) with IE9. the password is type-input, when i fail login and bring them back to the page with value prepopulated in the input tag. eg:

it renders as a non-password input showing the value attribute, not the place holder. looks really bad as it shows the users password in the clear.

any ideas?

Hi

Do you is it possible to add this to a div which is set to contenteditable?

I know it is possiable within HTML5 Browsers: http://stackoverflow.com/a/14531126

I need this functionality to work in IE8 though. Any ideas if this is possible?

Thanks
Kev

I know that new lines are not supported as part of the HTML5 spec, but in some cases it's very useful to display a placeholder with multiple lines in a text area. Interestingly, when I tested this plugin on IE6 it behaved as I would like placeholders to behave (Multiline, don't submit placeholder data to server)

I tried to change this line:
Placeholders.nativeSupport = test.placeholder !== void 0;
to
Placeholders.nativeSupport = false;

to just force the placeholder js to execute on modern browsers (tested in FF 27) and it actually did show the placeholder as multiline, however, when I submitted my form, the placeholder text was submitted to the server even though it looked like it was being cleared out.

So anyway, my feature request is to have an option that could be turned on or off to detect multiline placeholders in textareas and apply the js polyfill to those even on modern browsers.