Browse files

added automatic form binding to clear placeholder on submission. fixe…

…d overtyping bug. At version 0.2.1
  • Loading branch information...
1 parent 838bba7 commit 30472f1834232e7542222318905764d19cfab17d @Strangemother committed Jan 24, 2011
Showing with 123 additions and 12 deletions.
  1. +25 −2 example.html
  2. +98 −10 jquery.placeholder.js
View
27 example.html
@@ -12,17 +12,21 @@
$('#input1').placeholder('J Placeholder 1');
$('#input2').placeholder('J Placeholder 2', true);
$('#input3').placeholder('J Placeholder 3');
+ $('#input4').placeholder();
+ $('#input5').placeholder('Form Placeholder');
});
</script>
<style type="text/css">
+ .override.placeholder { color: red !important; font-size: 14px; font-style: italic }
+ .button { width: 120px;}
html { margin: 0; padding: 0; }
body { margin: 0 auto; padding: 10px; font-family: Arial, Helvetica, sans-serif; width: 960px; border: solid 1px #CACACA; border-top: none; }
p { font-size: 12px;}
span{ border: solid 1px #DDD; background: #EEE; padding: 1px 3px; font-family: "Courier New", Courier, monospace; }
input { width: 280px; font-size: 18px; }
- div { border-top: solid 1px #DDD; margin-top: 20px;
+ div { border-top: solid 1px #DDD; margin-top: 20px;};
</style>
</head>
@@ -31,7 +35,12 @@
<h1>jQuery.placeholder() Usage Examples</h1>
<p>This will show you a simple example of the placeholder plugin. For the purposes of this example -
the javascript placeholder will be '<span>J Placeholder</span>' and the placeholder within the attribute will be '<span>type something</span>'.</p>
-
+ <h2>Version 0.2.1</h2>
+ <p>Fixed Overtyping bug. If a user were to type the same value as the placeholder the typed value is now not determined as
+ the placeholder text. This is acheived by replacing spaces with the invisible ASCII Character 160.</p>
+ <h2>Version 0.2</h2>
+ <p>Placeholder elements will automatically attach themselves to forms. On submittion of the form, the element text within will
+ clear if the default text exists.</p>
<div>
<p>Simple Example <span>$('#input').placeholder();</span></p>
<p><span>&lt;input type=&quot;text&quot; name=&quot;input&quot; id=&quot;input&quot; /&gt;</span></p>
@@ -56,5 +65,19 @@
<input type="text" name="input3" id="input3" />
</div>
+ <div>
+ <p>An example with CSS override. Please note, to override the color attribute append <span>!important</span> within your css definition</p>
+ <p><span>&lt;input type=&quot;text&quot; name=&quot;input3&quot; id=&quot;input3&quot; /&gt;</span></p>
+ <input type="text" class='override' name="input4" id="input4" />
+ </div>
+
+ <form id='myform' method='get' action="example.html">
+ <div>
+ <p>An example of the placeholder automatically binding to a form element. The input field will clear when the form is submitted.<span>$('#input3').placeholder('Form Placeholder');</span></p>
+ <p><span>&lt;input type=&quot;text&quot; name=&quot;input3&quot; id=&quot;input3&quot; /&gt;</span></p>
+ <input type="text" name="input5" id="input5" /><input class='button' type="submit" value="GO!" />
+ </div>
+ </form>
+
</body>
</html>
View
108 jquery.placeholder.js
@@ -1,7 +1,13 @@
/**
*
* @Author: Jay Jagpal
- * @Version: 0.1.1
+ * @Version: 0.2.1
+ *
+ * Update: Fix over type bug - When a user types the same
+ * value as the placeholder text.
+ *
+ * Update: Automatic form handling - clearing text if the
+ * element is within a form without a change.
*
*/
@@ -10,7 +16,7 @@ page = this;
(function( $ ){
$.fn.placeholder = function() {
-
+ var __version__ = 'v0.2'
var _overridden = false;
var _defaultValue = 'Type Here'
var placeholderValue = null;
@@ -20,7 +26,10 @@ page = this;
var color = '#CFCFCF'
var self = this;
-
+ /*
+ * Applied in .2 to allow form handling and checking.
+ */
+ var hasForm = false
var _placeholderSupported = null;
var _hasPlaceholder = null;
@@ -77,26 +86,68 @@ page = this;
*
*/
}
+
+ /**
+ * Try to find any forms on the
+ * page.
+ */
+ var forms = $('form')
+
+ /*
+ * Read eaxh form and determine if this
+ * element is within any of the forms collected
+ * on the page.
+ */
+ for( var i=0; i < forms.length; i++)
+ {
+ var form = forms[i]
+ var formElement = $(form).has(this)
+
+ /**
+ * If any forms have this element,
+ * bind a submittion handler to the form to
+ * capture the event before the data is sent.
+ */
+ if(formElement.length > 0)
+ {
+ for(var j=0; j < formElement.length; j++)
+ {
+
+ self.hasForm = true
+
+ /*
+ * If the form is sumbitted, clear the
+ * text to ensure placeholder text is
+ * not sent with the form submittion.
+ */
+ $(formElement[i]).submit(function(){
+ self.removePlaceholderText()
+ });
+
+ }
+ }
+ }
}
/*
* set the arguments passed to the corresponding
- * variables
+ * variables. This allows the user to send the
+ * a specific order.
*/
this.parseArguments = function(args) {
switch(args.length)
{
case 0:
- suggestedPlaceholder = _defaultValue
+ self.setPlaceHolder(_defaultValue)
break;
case 3:
color = args[2]
case 2:
if(typeof(args[1]) == 'string')
{
- suggestedPlaceholder = args[1]
+ self.setPlaceHolder(args[1])
}
else if(typeof(args[1]) == 'boolean')
{
@@ -106,7 +157,7 @@ page = this;
case 1:
if(typeof(args[0]) == 'string')
{
- suggestedPlaceholder = args[0]
+ self.setPlaceHolder(args[0])
}
else if(typeof(args[0]) == 'boolean')
{
@@ -118,6 +169,14 @@ page = this;
}
+ /*
+ * 0.2.1 - helps in fixing the overtype bug. not many users
+ * will type this combination of characters.
+ */
+ this.setPlaceHolder = function(){
+ suggestedPlaceholder = String(arguments[0]).replace(' ', String.fromCharCode(160)) + String.fromCharCode(160) + "" + String.fromCharCode(160) + " ";
+ }
+
/**
* return a boolean value denoting if the browser supports
* the placeholder attribute.
@@ -177,7 +236,8 @@ page = this;
}
- this.addPlaceholderText = function() {
+
+ this.addPlaceholderText = function() {
var el = self;
@@ -192,7 +252,6 @@ page = this;
if(arguments[0])
text = arguments[0]
-
this.css('color', color)
this.val(text)
this.addClass('placeholder')
@@ -202,7 +261,6 @@ page = this;
this.removePlaceholderText = function() {
var el = self;
-
if(arguments[0])
el = arguments[0]
@@ -223,10 +281,40 @@ page = this;
self.removePlaceholderText()
}
+ this.hasCSSStyle = function() {
+
+
+ var rule = '.placeholder'
+ if(arguments[0])
+ rule = arguments[0]
+
+ var sheets = document.styleSheets
+
+ /*
+ * Walk through each sheet
+ */
+ for(var i=0; i < sheets.length; i++)
+ {
+ /*
+ * Walk through each rule of this stylesheet
+ */
+ for(var j=0; j < sheets[i].cssRules.length; j++)
+ {
+
+ var cssRule = sheets[i].cssRules[j].selectorText;
+ if (rule.indexOf(cssRule) != -1)
+ {
+ console.log(cssRule)
+ }
+ }
+ }
+ }
+
/**
* initiate the intial (construct)
*/
this.init(arguments)
+ //this.hasCSSStyle()
};
})( jQuery );

0 comments on commit 30472f1

Please sign in to comment.