small fix

frozeman · Jul 30, 2012 · cc2874f · cc2874f
1 parent e76668d
commit cc2874f
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 38 deletions.
diff --git a/Demo/index.html b/Demo/index.html
@@ -10,6 +10,9 @@
     </script>
 </head>
 <body>
+    <h1>PlaceholderSupprt Demo</h1>
+    <p>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 ;)</p>
+
     <input type='text' placeholder='some text'>
     <br><br>
     <textarea cols=20 rows=5 placeholder='some other txt'></textarea>

diff --git a/Docs/Placeholder.mdown → Docs/PlaceholderSupport.mdown b/Docs/Placeholder.mdown → Docs/PlaceholderSupport.mdown
diff --git 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.<br>
+Probably the most simple solution for this out there.<br>
+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!
+
+<b>Published under the MIT-License</b>.
+
+![Screenshot](https://github.com/frozeman/PlaceholderSupport/raw/master/screenshot.png)
 
 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.
+Will add the placeholder only to inputs with the class "myInputWithPlaceholder". But this input needs also a placeholder attribute with a text!
diff --git 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
@@ -1,5 +1,5 @@
 name:  PlaceholderSupport
 author:  frozeman
 current:  1.0
-category: Utilities
-tags:  [Placeholder]
+category: Forms
+tags:  [Placeholder,html5]
diff --git a/screenshot.png b/screenshot.png