Track when the placeholder is active so we can handle the case of val…

…id input which contains/matches the placeholder value
omelhus · Mar 22, 2013 · c4f0675 · c4f0675
1 parent c1256a6
commit c4f0675
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/lib/main.js b/lib/main.js
@@ -14,7 +14,7 @@
         ],
 
         // The list of keycodes that are not allowed when the polyfill is configured to hide-on-input
-        badKeys = [37, 38, 39, 40],
+        badKeys = [8, 37, 38, 39, 40, 46],
 
         // Styling variables
         placeholderStyleColor = "#ccc",
@@ -35,7 +35,8 @@
     // Hide the placeholder value on a single element. Returns true if the placeholder was hidden and false if it was not (because it wasn't visible in the first place)
     function hidePlaceholder(elem) {
         var type;
-        if (elem.value === elem.getAttribute("data-placeholder-value")) {
+        if (elem.value === elem.getAttribute("data-placeholder-value") && elem.getAttribute("data-placeholder-active") === "true") {
+            elem.setAttribute("data-placeholder-active", "false");
             elem.value = "";
             elem.className = elem.className.replace(classNameRegExp, "");
 
@@ -53,6 +54,7 @@
     function showPlaceholder(elem) {
         var type;
         if (elem.value === "") {
+            elem.setAttribute("data-placeholder-active", "true");
             elem.value = elem.getAttribute("data-placeholder-value");
             elem.className += " " + placeholderClassName;
 
@@ -102,7 +104,7 @@
         return function () {
 
             // Only hide the placeholder value if the (default) hide-on-focus behaviour is enabled
-            if (hideOnInput && elem.value === elem.getAttribute("data-placeholder-value")) {
+            if (hideOnInput && elem.value === elem.getAttribute("data-placeholder-value") && elem.getAttribute("data-placeholder-active") === "true") {
 
                 // Move the caret to the start of the input (this mimics the behaviour of all browsers that do not hide the placeholder on focus)
                 Utils.moveCaret(elem, 0);
@@ -128,18 +130,21 @@
             keydownVal = elem.value;
 
             //Prevent the use of the arrow keys (try to keep the cursor before the placeholder)
-            return !(keydownVal === elem.getAttribute("data-placeholder-value") && Utils.inArray(badKeys, e.keyCode));
+            if (elem.getAttribute("data-placeholder-active") === "true") {
+                return !(keydownVal === elem.getAttribute("data-placeholder-value") && Utils.inArray(badKeys, e.keyCode));
+            }
         };
     }
     function makeKeyupHandler(elem) {
         return function () {
             var type;
 
-            if (elem.value !== keydownVal) {
+            if (elem.getAttribute("data-placeholder-active") === "true" && elem.value !== keydownVal) {
 
                 // Remove the placeholder
                 elem.className = elem.className.replace(classNameRegExp, "");
                 elem.value = elem.value.replace(elem.getAttribute("data-placeholder-value"), "");
+                elem.setAttribute("data-placeholder-active", false);
 
                 // If the type of element needs to change, change it (e.g. password inputs)
                 type = elem.getAttribute("data-placeholder-type");
@@ -157,7 +162,7 @@
     }
     function makeClickHandler(elem) {
         return function () {
-            if (elem === document.activeElement && elem.value === elem.getAttribute("data-placeholder-value")) {
+            if (elem === document.activeElement && elem.value === elem.getAttribute("data-placeholder-value") && elem.getAttribute("data-placeholder-active") === "true") {
                 Utils.moveCaret(elem, 0);
             }
         };