danbentley / placeholder Goto Github PK

I'm not sure if you guys have support for this plugin for <textarea> elements, but I'm wondering if you're aware of this bug that occurs on older versions of WebKit browsers:

http://stackoverflow.com/questions/4461414/html5-placeholder-attribute-chrome-doesnt-line-wrap-in-textareas

It's resolved in the latest stable Chrome release, but the latest Safari stable release still has the bug.

Here's a JSBin that you can view in Safari to test:

http://jsbin.com/igakaz/edit#html,live

You'll notice in Chrome and other browsers that support placeholder natively, the text wraps and is fully visible, but in Safari it doesn't wrap, so the text gets cut off at the edge of the textarea.

Hey, maintainer(s) of danbentley/placeholder!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library danbentley/placeholder is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "danbentley/placeholder",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

If a field has a value when the page loads, then entering the field, clearing the content and exiting, causes the placeholder text to stick as the new value. This is due to the fact that the "changed" flag indicates true for fields that are initialized with a value in combination with onblur just checking for changed flag, and not actual value.

The error can be reproduced in Firefox 3.6 with your own demo code.

• Seph

If you have the following input:

<input type="text" name="foo" placeholder="bar" />

and the user enters bar into it (eg. the same as the placeholder text), the script will clear this before the form is submitted and send an empty value.

I've written a placeholder script for MooTools which covers this by doing a check in the onBlur event. Each input has a flag that gets set in the onBlur event if the value is not empty. Only inputs without the flag set get reset before the form submission.

We noticed an issue with your polyfill script.

In browsers that do not natively support the placeholder attribute: when submitting the form the password field value was undefined.

We fixed this by changing your createPasswordPlaceholder function to use a unique id value...

function createPasswordPlaceholder(input) {
    return $('<input>').attr({
        placeholder: input.attr('placeholder'),
        value: input.attr('placeholder'),
        id: input.attr('id') + '_polyfill', // needs unique id
        readonly: true
    }).addClass(input.attr('class'));
}

...I'm not 100% sure of the issue but it looked like (because there were two elements in the DOM with the same id) the browser was choosing the wrong element to get the password value from.

Obviously this doesn't make a whole lot of sense as in our example we were using the DOM Level 0 method for accessing form fields form[name].field.value so we weren't using the id attribute to grab the field value? The only thing I can think of is that our password field had a matching name and id attribute value of 'password' and I know in Internet Explorer form fields that have a name attribute value that matches another element with the same id attribute value then all sorts of strange things happen (but this was also happening in Firefox 3.6?)

Any way, the changing of the id worked for us and might help anyone else who came across this issue.

Password label says, "Name" in the index.html.

Hi, really useful little plugin, thanks for your work!

I do have a question - if I define a colour for the input using css, the placeholder text changes to that colour - how do I get similar functionality to webkit, where the placeholder text is pale grey, then changes to the colour defined for the input on focus?

I'll admit I haven't actually tested it, but from a look through of your code, it doesn't look like password inputs are supported, since all you do is put the placeholder text in the value attribute of each form element.

Similar plugins by others have done this by switching the type, or inserting labels over the top of the password elements.

My site has a bunch of hidden forms. E.g. when the user clicks a link to "+ Invite a friend", the invite friend form .show() is called. These hidden fields aren't handled by this plugin AFAICT. I did some basic debugging and found out that the iteration through each ":input[placeholder]" only covers those which are visible. I confirmed that's the case for Chrome as well as for IE8 where I'm interested in getting the placeholder plugin working, so I assume that's normal browser behavior not to iterate through the hidden fields.

My question for this plugin is, would it be a good idea to support those hidden inputs also ?

I'm trying to make the functionality work for my own site by adding a function "setupMorePlaceholders" which could be called when a hidden div is shown. I am not a Javascript expert, so I don't know how better to do it. My best idea is to call that function manually after each time I call "$(#the_hidden_div).show()". Combined with making the placeholder internal functions be available outside the closure, this is working for me.