Added placeholder support and fixes

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Description of changes by version
 
+# v1.1.0
+- Added support for placeholders
+- Fixed a bug with affixValue()
+
 # v1.0.3
 - Fixed bug of multiple selection overwriting prefix.
 - Fixed bug of pasting, which made string upper case.

InputAffix.js

@@ -1,6 +1,6 @@
 "use strict";
 // Created by Juan Camilo Osorio (JCOC611 - jcoc611.com).
-// Version 1.0.3. (Beta, stable).
+// Version 1.1.0. (Beta, stable).
 // Consider giving back by sharing your own code!
 // Licensed under the MIT License. 
 // http://www.opensource.org/licenses/mit-license.php
@@ -156,7 +156,7 @@
 
 			// Remove prefix if necessary
 			if(prefix && val.substr(0, prefix.length) == prefix)
-				val = val.substr(this.data("prefix"));
+				val = val.substr(prefix.length);
 			// Remove suffix if necessary
 			if(suffix && val.substr(val.length - suffix.length) == suffix)
 				val = val.substr(0, val.length - suffix.length);
@@ -238,6 +238,7 @@
 		// Remove previous prefix (if it's there)
 		if(prefix && val.substr(0, prefix.length) == prefix){
 			this.val(val.substr(prefix.length, val.length - prefix.length));
+			val = this.val();
 		}
 
 		// Overload for .prefix([...], index), an array of prefixes.
@@ -256,8 +257,9 @@
 		this.data("prefix", pre);
 		this.trigger("prefixchange", [pre, index || 0]);
 
+		// Allow placeholder if no value
 		// Add prefix if it's not already there
-		if(this.val().indexOf(pre) != 0){
+		if(!(this.affixValue() == "" && this.attr("placeholder")) && val.indexOf(pre) != 0){
 			this.val(pre + this.val());
 		}
 
@@ -422,6 +424,16 @@
 				val = prefix + val;
 				$(this).val(val);
 			}
+			// If input has placeholder and is empty
+			// show placeholder
+			if($(this).affixValue() == "" && $(this).attr("placeholder")){
+				$(this).val("");
+			}
+		}).on("focus", function(e){
+			var val = $(this).affixValue();
+			if(val == ""){
+				$(this).affixValue("");
+			}
 		});
 		return this;
 	};
@@ -503,8 +515,10 @@
 		this.data("suffix", suff);
 		this.trigger("suffixchange", [suff, index || 0]);
 
+		// Allow for display of placeholder
 		// Add suffix if it's not already there
-		if(this.val().substr(this.val().length - suff.length) !== suff){
+		if(!(this.affixValue() == "" && this.attr("placeholder"))
+			&& this.val().substr(this.val().length - suff.length) !== suff){
 			this.val(this.val() + suff);
 		}
 
@@ -668,6 +682,29 @@
 				val += suffix;
 				$(this).val(val);
 			}
+			// If input has placeholder and is empty
+			// show placeholder
+			if($(this).affixValue() == "" && $(this).attr("placeholder")){
+				$(this).val("");
+			}
+		}).on("focus", function(e){
+			var t = $(this), val = t.affixValue();
+			// If input is empty, show suffix
+			// And move caret to correct position
+			if(val == ""){
+				t.affixValue("");
+				var pos = 0;
+				if(t.data("prefix")){
+					pos = t.data("prefix").length;
+				}
+				setTimeout(function(){
+					t.caret({
+						start: pos,
+						end: pos
+					});
+				}, 1);
+				e.preventDefault();
+			}
 		});
 		return this;
 	}

README.md

@@ -29,7 +29,7 @@ If you want to use the hosted libraries, just add the following to the head of y
 
 ```html
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-<script src="http://static.jcoc611.com/hosted/js/InputAffix.1.0.3.min.js"></script>
+<script src="http://static.jcoc611.com/hosted/js/InputAffix.1.1.0.min.js"></script>
 ```
 
 Otherwise, you can host your own version of jQuery and Input Affix to suit your needs. After you have included both libraries, adding a prefix or suffix is easier than writing the HTML for them. Check the documentation out for the detailed explanation:
@@ -146,7 +146,7 @@ This event is triggered every time the suffix of an element is changed. It is pa
 ## Hosted library
 In addition to the GitHub repo, I will also be hosting the minified version of the library at
 
-    http://static.jcoc611.com/hosted/js/InputAffix.1.0.3.min.js
+    http://static.jcoc611.com/hosted/js/InputAffix.1.1.0.min.js
 
 ## Collaborating
 If you have any issues with the code, or have found any bugs, submit an Issue Ticket! Also, if you want to improve/change anything just fork the repo, make your changes, and submit a pull request. I will review it as soon as possible.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Input Affix",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "homepage": "https://github.com/jcoc611/InputAffix",
   "authors": [
     "Juan Camilo Osorio <jcoc611@gmail.com>"

test.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>jQuery InputAffix v1.0.3 Test</title>
+	<title>jQuery InputAffix v1.1.0 Test</title>
 	<meta charset="UTF-8">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 	<!-- <script type="text/javascript" src="http://static.jcoc611.com/hosted/js/InputAffix.0.1.3.min.js"></script> -->
@@ -17,18 +17,24 @@
 		$("#testMultipleSuffixes").suffix(["#", "$", "&"]).on("suffixchange", function(e, suff){
 			$("#multipleSuffixesMessage").text(suff);
 		});
+		$("#testPlaceholder").prefix("#");
+		$("#testPlaceholder2").suffix("%");
+		$("#testPlaceholder3").prefix("Angle: ").suffix("°");
 	});
 	</script>
 </head>
 <body>
-	<h1>Input Affix v1.0.3 Test</h1>
+	<h1>Input Affix v1.1.0 Tests</h1>
 	<span>Prefix test <i>(Test: )</i> </span><input id="testPrefix" value="something"></input><br/><br/>
 	<span>Suffix test <i>(%)</i> </span><input id="testSuffix" value="100"></input><br/><br/>
 	<span>Dual test <i>(Angle: ...°)</i> </span><input id="testDual" value="100"></input><br/><br/>
 	<span>Multiple prefixes <i>(#, $, or &amp;)</i></span><input id="testMultiplePrefixes" value="000"></input><br/><br/>
 	<span>Current Prefix for input above: <i id="multiplePrefixesMessage">#</i></span><br/><br/>
 	<span>Multiple suffixes <i>(#, $, or &amp;)</i></span><input id="testMultipleSuffixes" value="000"></input><br/><br/>
 	<span>Current Suffix for input above: <i id="multipleSuffixesMessage">#</i></span><br/><br/>
+	<span>Placeholder test <i>(#)</i> </span><input id="testPlaceholder" placeholder="#hashtag"></input><br/><br/>
+	<span>Placeholder test 2 <i>(%)</i> </span><input id="testPlaceholder2" placeholder="100%"></input><br/><br/>
+	<span>Placeholder test 3 <i>(Angle: ...°)</i> </span><input id="testPlaceholder3" placeholder="Angle: 180°"></input><br/><br/>
 	<span>Try it out for your self!</span>
 </body>
 </html>