Fix width bug with proxy (with long values, proxy would bleed out). A…

…lso a change to maxlength, handles whitespace transparently

demo/demo.html

@@ -74,6 +74,10 @@
 			Default <code>input[type=text]</code> with <code>maxlength="7"</code>. <em>You must account for whitespace in the maxlength.</em>
 			<input type="text" data-politespace maxlength="7" value="123456">
 		</label>
+		<label>
+			Default <code>input[type=number]</code> with <code>maxlength="7"</code>.
+			<input type="number" data-politespace maxlength="7" value="123456">
+		</label>
 		<label>
 			Default textarea
 			<textarea data-politespace></textarea>
@@ -128,6 +132,18 @@
 			<code>input[type=tel]</code> (US Phone Number) with <code>data-grouplength="4,3,3" data-reverse</code>
 			<input type="tel" data-politespace data-grouplength="4,3,3" data-reverse value="1234567890">
 		</label>
+		<label>
+			<code>input[type=number]</code> with a long value <code>data-grouplength="4"</code>
+			<div>
+				<input type="number" pattern="[0-9]*" data-politespace data-grouplength="4" value="123456789012345678901234567890">
+			</div>
+		</label>
+		<label>
+			<code>input[type=number]</code> with a long value <code>data-grouplength="4"</code>
+			<div>
+				<input type="number" pattern="[0-9]*" data-politespace data-grouplength="4" value="12345678901234567890" style="width: 40%">
+			</div>
+		</label>
 	</form>
 </body>
 </html>

src/politespace-init.js

@@ -22,6 +22,7 @@
 				.bind( "blur", function() {
 					$( this ).closest( ".politespace-proxy" ).addClass( "active" );
 					polite.update();
+					polite.updateProxy();
 				})
 				.bind( "focus", function() {
 					$( this ).closest( ".politespace-proxy" ).removeClass( "active" );

src/politespace.css

@@ -1,6 +1,7 @@
 .politespace-proxy {
 	position: relative;
 	overflow: hidden; /* clearfix for floating siblings */
+	display: inline-block;
 }
 .politespace-proxy :first-child {
 	display: none;
@@ -11,7 +12,20 @@
 	left: 0;
 	top: 0;
 	pointer-events: none;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
 }
 .politespace-proxy.active input {
 	color: transparent;
 }
+.politespace-proxy.active input[type=number] {
+	-moz-appearance: textfield;
+}
+.politespace-proxy.active input[type=number]::-webkit-inner-spin-button,
+.politespace-proxy.active input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}

src/politespace.js

@@ -61,21 +61,21 @@
 		return this._divideIntoArray( val ).join( this.delimiter );
 	};
 
-	Politespace.prototype.val = function() {
-		return this.format( this.element.value );
-	};
-
-	Politespace.prototype.update = function() {
-		var maxlength = this.element.getAttribute( "maxlength" ),
-			val = this.val();
-
+	Politespace.prototype.trimMaxlength = function( value ) {
+		var maxlength = this.element.getAttribute( "maxlength" );
+		// Note input type="number" maxlength does nothing
 		if( maxlength ) {
-			val = val.substr( 0, maxlength );
+			value = value.substr( 0, maxlength );
 		}
+		return value;
+	};
 
-		if( !this.useProxy() ) {
-			this.element.value = val;
-		}
+	Politespace.prototype.getValue = function() {
+		return this.trimMaxlength( this.element.value );
+	};
+
+	Politespace.prototype.update = function() {
+		this.element.value = this.useProxy() ? this.getValue() : this.format( this.getValue() );
 	};
 
 	Politespace.prototype.unformat = function( value ) {
@@ -91,8 +91,11 @@
 	};
 
 	Politespace.prototype.updateProxy = function() {
+		var proxy;
 		if( this.useProxy() ) {
-			this.element.parentNode.firstChild.innerHTML = this.val();
+			proxy = this.element.parentNode.firstChild;
+			proxy.innerHTML = this.format( this.getValue() );
+			proxy.style.width = this.element.offsetWidth + "px";
 		}
 	};
 
@@ -115,15 +118,17 @@
 		var parent = this.element.parentNode;
 		var el = document.createElement( "div" );
 		var proxy = document.createElement( "div" );
-		proxy.innerHTML = this.val();
 		proxy.style.font = getStyle( this.element, "font" );
-		proxy.style.left = sumStyles( this.element, [ "padding-left", "border-left-width" ] ) + "px";
+		proxy.style.paddingLeft = sumStyles( this.element, [ "padding-left", "border-left-width" ] ) + "px";
+		proxy.style.paddingRight = sumStyles( this.element, [ "padding-right", "border-right-width" ] ) + "px";
 		proxy.style.top = sumStyles( this.element, [ "padding-top", "border-top-width", "margin-top" ] ) + "px";
 
 		el.appendChild( proxy );
 		el.className = "politespace-proxy active";
 		var formEl = parent.replaceChild( el, this.element );
 		el.appendChild( formEl );
+
+		this.updateProxy();
 	};
 
 	w.Politespace = Politespace;