109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
/**
|
|
* This is an implementation of the placeholder="" attribute as
|
|
* implemented in WebKit.
|
|
*
|
|
* Written by Simon Pieters <simonp@opera.com>
|
|
* Improved by Andreas Tolf Tolfsen <ato@fsfe.org>
|
|
*
|
|
* Licensed under the MIT license.
|
|
*
|
|
* Suggested styling: input[_placeholder_on] { color:GrayText; }
|
|
*/
|
|
|
|
if (!HTMLInputElement.prototype.__lookupGetter__("placeholder")) {
|
|
HTMLInputElement.prototype.__defineGetter__("placeholder", function() {
|
|
return this.getAttribute("placeholder");
|
|
});
|
|
HTMLInputElement.prototype.__defineSetter__("placeholder", function(value) {
|
|
this.setAttribute("placeholder", value);
|
|
});
|
|
|
|
function isTextField(elm) {
|
|
if (!(elm instanceof HTMLInputElement))
|
|
return false;
|
|
return (elm.type != "checkbox" &&
|
|
elm.type != "radio" &&
|
|
elm.type != "button" &&
|
|
elm.type != "submit" &&
|
|
elm.type != "reset" &&
|
|
elm.type != "remove" &&
|
|
elm.type != "file" &&
|
|
elm.type != "hidden" &&
|
|
elm.type != "image" &&
|
|
elm.type != "datetime" &&
|
|
elm.type != "datetime-local" &&
|
|
elm.type != "date" &&
|
|
elm.type != "month" &&
|
|
elm.type != "week" &&
|
|
elm.type != "time" &&
|
|
elm.type != "range");
|
|
}
|
|
|
|
function addPlaceholder(elm) {
|
|
elm.setAttribute("_placeholder_on", elm.type);
|
|
if (elm.type == "password")
|
|
elm.type = "text";
|
|
elm.value = "\uFEFF" + elm.placeholder;
|
|
}
|
|
|
|
function removePlaceholder(elm) {
|
|
if (elm.getAttribute("_placeholder_on") == "password")
|
|
elm.type = "password"
|
|
elm.value = "";
|
|
elm.removeAttribute("_placeholder_on");
|
|
}
|
|
|
|
function submitForm(form) {
|
|
var elms = form.getElementsByTagName("*");
|
|
for (var i = 0, length = elms.length; i < length; ++i) {
|
|
var elm = elms[i];
|
|
if (elm.getAttribute("_placeholder_on")) {
|
|
elm.value = "";
|
|
}
|
|
}
|
|
}
|
|
|
|
// add placeholders on load
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
var elms = document.getElementsByTagName("*");
|
|
for (var i = 0, length = elms.length; i < length; ++i) {
|
|
var elm = elms[i];
|
|
if (!isTextField(elm))
|
|
continue;
|
|
if (elm.value == "" &&
|
|
elm.getAttribute("placeholder") &&
|
|
document.activeElement != elm) {
|
|
addPlaceholder(elm);
|
|
}
|
|
}
|
|
}, false);
|
|
|
|
// remove placeholder when focused
|
|
document.addEventListener("focus", function(e) {
|
|
if (!isTextField(e.target))
|
|
return;
|
|
if (e.target.value == "\uFEFF" + e.target.placeholder) {
|
|
removePlaceholder(e.target);
|
|
//e.target.focus(); // XXX remove this line when opera bug 286219 is fixed
|
|
}
|
|
}, true);
|
|
|
|
// add placeholder when blurred
|
|
document.addEventListener("blur", function(e) {
|
|
if (!isTextField(e.target) ||
|
|
!e.target.getAttribute("placeholder")) {
|
|
return;
|
|
}
|
|
if (e.target.value == "") {
|
|
addPlaceholder(e.target);
|
|
}
|
|
}, true);
|
|
|
|
// remove placeholder value when submitting form
|
|
document.addEventListener("submit", function(e) {
|
|
var form = e.target;
|
|
submitForm(form);
|
|
}, true);
|
|
}
|
|
|