Auto insert ":" in Mac Addresses

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

devinodaniel

Light Poster

47 posts since Feb 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

0

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.

vishesh

Nearly a Posting Virtuoso

1,381 posts since Oct 2006

Reputation Points: 85

Solved Threads: 42

10 Months Ago

0

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.

devinodaniel

Light Poster

47 posts since Feb 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

0

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>

devinodaniel

Light Poster

47 posts since Feb 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Show Comments

1

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

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

10 Months Ago

0

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

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

10 Months Ago

0

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

Light Poster

47 posts since Feb 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

0

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

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

10 Months Ago

0

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.

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

10 Months Ago

0

Airshow & Luckychap,

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

devinodaniel

Light Poster

47 posts since Feb 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

0

Devinodaniel,

Good luck with it.

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

Auto insert ":" in Mac Addresses

This question has already been solved