diff --git a/lib/main.js b/lib/main.js index bdc9620..61671a5 100644 --- 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); } };