Member Avatar for devinodaniel

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

  • 4 Contributors
  • 10 Replies
  • 5K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for devinodaniel

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.

Edited by devinodaniel because: n/a
Member Avatar for devinodaniel

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>
Edited by devinodaniel because: n/a
Member Avatar for Luckychap

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

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for devinodaniel

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

Member Avatar for Airshow

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

Member Avatar for Luckychap

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.

Member Avatar for devinodaniel

Airshow & Luckychap,

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

Member Avatar for Airshow

Devinodaniel,

Good luck with it.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.