You will only see this script in action if you use an ancient browser like IE, but don't worry it will look the same ;)
+
diff --git a/Docs/Placeholder.mdown b/Docs/PlaceholderSupport.mdown
similarity index 100%
rename from Docs/Placeholder.mdown
rename to Docs/PlaceholderSupport.mdown
diff --git a/README.md b/README.md
index af84c48..dab87d4 100755
--- a/README.md
+++ b/README.md
@@ -1,20 +1,35 @@
PlaceholderSupport
================
-Adds a fallback for browsers that do not support the placeholder property.
-Probably the most simple solution for this out there.
-I found many others where you need extra CSS. This is so simple you just call the class and you have placeholder support in all browsers!
+Adds a fallback for browsers that do not support the placeholder attribute.
+Probably the most simple solution for this out there.
+I found many others where you need extra CSS. This is so simple that you just have to call the class and you have placeholder support for all browsers!
+
+Published under the MIT-License.
+
+
How to use
----------
Just add the PlaceholderSupport.js to your website and call:
+
+ #JS
+ window.addEvent('domready',function(){
+
+ new PlaceholderSupport();
+
+ });
+
+
+Will add placeholder functionality to all inputs and textarea elements with a "placeholder" attribute.
+
+
#JS
- new PlaceholderSupport();
+ window.addEvent('domready',function(){
- or
+ new PlaceholderSupport('input.myInputWithPlaceholder');
- new PlaceholderSupport(elements);
+ });
-Leave the "elements" parameter empty, to add placeholder functionality to all inputs and textarea elements with a "placeholder" attribute.
-Otherwise the "elements" parameter can be a string with CSS selectors or an array with elements.
\ No newline at end of file
+Will add the placeholder only to inputs with the class "myInputWithPlaceholder". But this input needs also a placeholder attribute with a text!
\ No newline at end of file
diff --git a/Source/PlaceholderSupport.js b/Source/PlaceholderSupport.js
index 2cd080e..986bf1a 100755
--- a/Source/PlaceholderSupport.js
+++ b/Source/PlaceholderSupport.js
@@ -2,7 +2,7 @@
---
description: Adds cross browser Placeholder support to inputs and textareas, which have a placholder attribute.
-license: MIT-style
+license: MIT-License
authors:
- Fabian Vogelsteller [frozeman.de]
@@ -14,44 +14,41 @@ provides: [PlaceholderSupport]
...
*/
-PlaceholderSupport = new Class({
+var PlaceholderSupport = new Class({
initialize : function(els){
if(('placeholder' in document.createElement('input')))
return;
var self = this;
- window.addEvent('domready',function(){
- this.elements = (typeOf(els) === 'string') ? $$(els) : els;
- if(typeOf(this.elements) === 'null' || typeOf(this.elements[0]) === 'null') {
- this.elements = $$('input[placeholder],textarea[placeholder]');
- }
+ this.elements = (typeOf(els) === 'string') ? $$(els) : els;
+ if(typeOf(this.elements) === 'null' || typeOf(this.elements[0]) === 'null') {
+ this.elements = $$('input[placeholder],textarea[placeholder]');
+ }
- this.elements.each(function(input){
- var textColor = input.getStyle('color');
- var lighterTextColor = self.LightenDarkenColor(textColor,80);
+ this.elements.each(function(input){
+ var textColor = input.getStyle('color');
+ var lighterTextColor = self.LightenDarkenColor(textColor,80);
- if(input.getProperty('value') === '') {
- input.setProperty('value',input.getProperty('placeholder'));
- input.setStyle('color',lighterTextColor);
- }
+ if(input.getProperty('value') === '') {
+ input.setProperty('value',input.getProperty('placeholder'));
+ input.setStyle('color',lighterTextColor);
+ }
- input.addEvents({
- focus: function(){
- if(input.getProperty('value') === input.getProperty('placeholder')) {
- input.setProperty('value','');
- input.setStyle('color',textColor);
- }
- },
- blur: function(){
- if(input.getProperty('value') === '') {
- input.setProperty('value',input.getProperty('placeholder'));
- input.setStyle('color',lighterTextColor);
- }
+ input.addEvents({
+ focus: function(){
+ if(input.getProperty('value') === input.getProperty('placeholder')) {
+ input.setProperty('value','');
+ input.setStyle('color',textColor);
}
- });
+ },
+ blur: function(){
+ if(input.getProperty('value') === '') {
+ input.setProperty('value',input.getProperty('placeholder'));
+ input.setStyle('color',lighterTextColor);
+ }
+ }
});
-
});
},
diff --git a/package.yml b/package.yml
index cf4eadd..ccc4ecf 100755
--- a/package.yml
+++ b/package.yml
@@ -1,5 +1,5 @@
name: PlaceholderSupport
author: frozeman
current: 1.0
-category: Utilities
-tags: [Placeholder]
\ No newline at end of file
+category: Forms
+tags: [Placeholder,html5]
\ No newline at end of file
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..c5ca04b
Binary files /dev/null and b/screenshot.png differ