I have an INPUT box that the user will put their Mac Address into.

I'd like to have the INPUT box automatically insert the :'s every two characters.

So they would be able to type in the box "001ff3bdf27c" and upon clicking out of the box (or moving on to the next filed) the box would correct it to "00:1f:f3:bd:f2:7c"

Ideas?

Thanks for your help,
D

Thanks for your nudge to "learn myself". Believe me I've tried. Was hoping that someone had done this before. No need to reinvent the wheel, ya know?

You have to write some JavaScript code. If you are using plain JavaScript(not any framework like jQuery), checkout DOM events and DOM Input Text properties

http://www.w3schools.com/jsref/dom_obj_event.asp
http://www.w3schools.com/jsref/dom_obj_text.asp

Write the code yourself, and if you face some problem you can post here.

I know the very basics, but was hoping someone could help me out with the math.

<script>
function correctAddress() {

}
</script>
<form><input onBlur="correctAddress()"></form>

Try this:-

<html>
	<head>
		<script>
			function doInsert(inp) {
				var v = inp.value;
				var l = v.length;
				var maxLen = 17 // Length of mac string including ':'
				if(l >= 2 && l < maxLen) { 
					var v1;
					v1 = v;					
					/* Removing all ':' to calculate get actaul text */
					while(!(v1.indexOf(":") < 0)) { // Better use RegEx
						v1 = v1.replace(":", "")
					}					
					/* Insert ':' after ever 2 chars */
					if(v1.length%2 == 0) {
						inp.value = v + ":";
					}
				}
			}
		</script>
	</head>
	
	<body>
		<input type="text" maxlength="17" onkeydown="doInsert(this);"/>
	</body>
</html>

Its sometimes good to reinvent wheel ... I just did :p

Food for thought ... here's a completely different approach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>

<script type='text/javascript'>
onload = function(){
	var macFields = document.getElementById("macFields");
	var mac_ = macFields.getElementsByTagName("input");

	function writeMacToHidden(){
		var m = [];
		for(var i=0; i<mac_.length; i++){
			m.push(mac_[i].value);
		}
		document.forms[0].mac.value = m.join('');
	}
	function macInput_closure(i){
		return function(){
			writeMacToHidden();
			if(this.value.length == 2) {
				var index = (i+1) % mac_.length;
				mac_[index].focus();
			}
		};
	}
	for(var i=0; i<mac_.length; i++){
		mac_[i].onkeyup = macInput_closure(i);
	}
}
</script>
</head>

<body>

<form>
	<input xtype="hidden" name="mac" size="12"> <i>normally hidden</i>
	<br/><br/>
	<div id="macFields">
	MAC Address: <input class="mac_" size="2" maxlength="2">&nbsp;:&nbsp;<input class="mac_" size="2" maxlength="2">&nbsp;:&nbsp;<input class="mac_" size="2" maxlength="2">&nbsp;:&nbsp;<input class="mac_" size="2" maxlength="2">&nbsp;:&nbsp;<input class="mac_" size="2" maxlength="2">&nbsp;:&nbsp;<input class="mac_" size="2" maxlength="2">
	</div>
</form>

</body>
</html>

Airshow

You are my hero! That's perfect. :) Thank you for taking time to help out a stranger!

Try this:-

<html>
	<head>
		<script>
			function doInsert(inp) {
				var v = inp.value;
				var l = v.length;
				var maxLen = 17 // Length of mac string including ':'
				if(l >= 2 && l < maxLen) { 
					var v1;
					v1 = v;					
					/* Removing all ':' to calculate get actaul text */
					while(!(v1.indexOf(":") < 0)) { // Better use RegEx
						v1 = v1.replace(":", "")
					}					
					/* Insert ':' after ever 2 chars */
					if(v1.length%2 == 0) {
						inp.value = v + ":";
					}
				}
			}
		</script>
	</head>
	
	<body>
		<input type="text" maxlength="17" onkeydown="doInsert(this);"/>
	</body>
</html>

Its sometimes good to reinvent wheel ... I just did :p

Devinodaniel,

Beware! As I said, it's an "approach", not a solution. In other words, it needs more than the 15 minutes development I needed to prepare the demo.

Try, for example, filling all the fields then tabbing from one to another.

Airshow

Hi Devinodaniel,

As Airshow said, this is not a complete solution. W are not here to do job but to help each other. We gave you approaches not solutions. Like in my snippet, there are still lot to do like handling other keys other than mac specific. try backspace.

You need to add more code to make it foolproof.

Airshow & Luckychap,

I totally understand. I'm definitely going to build upon that code. I just appreciate the enormous head start!

Devinodaniel,

Good luck with it.

Airshow