0

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
16
Views
6 Years
Discussion Span
Last Post by Airshow
Featured Replies
  • Try this:- [code=html] <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 … Read More

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.

Edited by devinodaniel: n/a

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>

Edited by devinodaniel: n/a

2

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

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

Edited by Airshow: n/a

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

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

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.

0

Airshow & Luckychap,

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.