Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 9514eed
Showing
4 changed files
with
209 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
|
||
<title>mooPlaceholder Demo Page</title> | ||
<meta name="description" content="use placeholder= functionality in older browsers."> | ||
<meta name="author" content="Dimitar Christoff"> | ||
|
||
<link rel="stylesheet" href="../Source/css/mooPlaceholder.css"> | ||
<link class="stylesheet" rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css"> | ||
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> | ||
<script type="text/javascript" src="../Source/js/mooPlaceholder.js.js" defer="defer"></script> | ||
</head> | ||
<body> | ||
<div> | ||
<form id="myform" action="#" method="get"> | ||
<input id="foo" name="foo" placeholder="gay" class="foo" /> | ||
<input id="foo2" name="foo2" placeholder="bar" class="foo" /> | ||
</form> | ||
</div> | ||
<div> | ||
<button id="remove">remove</button> <button id="attach">attach</button> | ||
</div> | ||
|
||
<script type="text/javascript"> | ||
window.addEvent("domready", function() { | ||
var ph = new mooPlaceholder().attachToElements(); | ||
|
||
document.id("attach").addEvent("click", function() { | ||
ph.attachToElements() | ||
}); | ||
document.id("remove").addEvent("click", function() { | ||
ph.detachFromElements(); | ||
}); | ||
|
||
// example form submit. | ||
document.id("myform").addEvent("submit", function(e) { | ||
|
||
// first, remove placeholder values. | ||
ph.detachFromElements(); | ||
|
||
// simple validation to check for required value. | ||
var hasEmptyFields = this.getElements("input").get("value").some(function(el) { | ||
return el.trim() === ''; | ||
}); | ||
|
||
// if it has failed, restore it and stop submit | ||
if (hasEmptyFields) { | ||
// restore placeholder values | ||
ph.attachToElements(); | ||
alert("please fill in all required fields"); | ||
e && e.preventDefault(); | ||
} | ||
else { | ||
// allow it to bubble. | ||
alert("submitting the form"); | ||
} | ||
|
||
}); | ||
|
||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
mooPlaceholder | ||
============== | ||
|
||
A MooTools plugin that enables placholder= functionality on older browsers | ||
|
||
|
||
How to use | ||
---------- | ||
|
||
Check the `Demo/index.html` | ||
|
||
|
||
Example | ||
------- | ||
|
||
[http://jsfiddle.net/dimitar/bYQ8P/](http://jsfiddle.net/dimitar/bYQ8P/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
input.unchanged { | ||
color: #A9A9A9; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
/* | ||
--- | ||
name: mooPlaceholder | ||
description: provides placeholder= behaviour to browsers that don't support it. | ||
author: Dimitar Christoff, Qmetric Group Limited | ||
license: MIT-style license. | ||
version: 1.5 | ||
requires: | ||
- Core/String | ||
- Core/Event | ||
- Core/Element | ||
- Core/Array | ||
- Core/Class | ||
provides: mooPlaceholder | ||
... | ||
*/ | ||
(function() { | ||
|
||
var mooPlaceholder = this.mooPlaceholder = new Class({ | ||
// behaviour for default values of inputs class | ||
|
||
Implements: [Options], | ||
|
||
options: { | ||
// default options | ||
htmlPlaceholder: "placeholder", // the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder" | ||
unmoddedClass: "unchanged", // apply a class to the unmodded input, say, to grey it out | ||
parentNode: document, // limit to a particular set of child nodes | ||
defaultSelector: "input[placeholder]" | ||
}, | ||
|
||
initialize: function(options) { | ||
this.setOptions(options); | ||
this.nativeSupport = !!'placeholder' in document.createElement('input'); | ||
}, | ||
|
||
attachToElements: function(selector) { | ||
// basic function example that uses a class selector to | ||
this.inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector); | ||
|
||
if (this.inputs.length) { | ||
this.inputs.each(function(el) { | ||
this.attachEvents(el); | ||
}, this); | ||
} | ||
}, // end attachToElements | ||
|
||
detachFromElements: function() { | ||
// reset managed fields values. call this on form submit before validation! | ||
var className = this.options.unmoddedClass; | ||
if (!this.inputs) | ||
return; | ||
|
||
this.inputs.each(function(el) { | ||
if (el.get("value") == el.get("placeholder")) { | ||
el.set("value", "").removeClass(className); | ||
} | ||
el.removeEvents(el.retrieve("bound")).eliminate("bound"); | ||
}); | ||
|
||
}, | ||
|
||
attachEvents: function(el, placeholder) { | ||
// method that attaches the events to an input element. | ||
placeholder = placeholder || el.get(this.options.htmlPlaceholder); | ||
if (this.nativeSupport || !document.id(el) || !placeholder || !placeholder.length) | ||
return; | ||
|
||
var hasValue = !!el.get("value").length; | ||
|
||
if (!hasValue) | ||
el.set("value", placeholder); | ||
|
||
el.store("placeholder", placeholder); | ||
|
||
// append unmodded class to input at start | ||
if (this.options.unmoddedClass && !hasValue) | ||
el.addClass(this.options.unmoddedClass); | ||
|
||
// now cater for the events | ||
var boundEvents = { | ||
change: this.change.bind(this, el), | ||
focus: this.focus.bind(this, el), | ||
blur: this.blur.bind(this, el) | ||
}; | ||
|
||
el.addEvents(boundEvents).store("bound", boundEvents); | ||
}, | ||
|
||
change: function(el) { | ||
// when value changes | ||
var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); | ||
if (value != placeholder) { | ||
// once it changes, remove this check and remove the unmoddedClass | ||
el.removeClass(this.options.unmoddedClass).removeEvents("change"); | ||
} | ||
|
||
}, | ||
|
||
focus: function(el) { | ||
var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); | ||
if (value == placeholder) { | ||
el.set("value", "").removeClass(this.options.unmoddedClass); | ||
} | ||
}, | ||
|
||
blur: function(el) { | ||
var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); | ||
if (value == placeholder || value == "") { | ||
el.set("value", placeholder).addClass(this.options.unmoddedClass); | ||
} | ||
} | ||
|
||
}); | ||
|
||
})(); |