✔ Input field. Formatierung festlegen

[gordonk]

Hi,
ich habe ein <input> in dem eine IP eingegeben wird.
Kann ich vielleicht mit einem JavaScript dafür sorgen das in dem <input> bereits 3 punkte stehen und man dann nurnoch die zahlen eingeben muss ?
Bei <input value=" . . . "> würde ich die Punkte ja nur nach hinten schieben wenn ich nun die Zahlen eingebe. Vielleicht ist es zu realisieren das nach 3 eingegebenen Zahlen der Cursor über den ersten Punkt springt und wenn man nur 2 zahlen hat, man zB die rechte Pfeiltaste benutzt um den nächsten Punkt zu überspringen.

 

[Sven Mintel]

Moin Gordon,

mit 1 einzigem Input wird soetwas kaum hinzubekommen sein.
Was möglich wäre, wären bspw. 4 Inputs, dazwischen jeweils ein Punkt(ausserhalb der Inputs)....über die Überwachung der Key-Events liesse sich soetwas simulieren, und per CSS könnte man es aussehen lassen, als wäre es 1 Input

 

[gordonk]

Moin Sven,
also das ganze mit 4 inputs zu lösen hatte ich schon in erwägung gezogen.
Kann man denn vielleicht ein Script schreiben das "onChange" funktioniert und prüft ob 3 Zeichen ( und vorallem nur Zahlen ) eingetragen wurden und dann der Cursor ins nächste input springt ? So müsste man bei einer 12 stelligen IP schonmal nichts machen als diese nieder zu tippen ^^

edit: Rechtschreibung... ist früh am Morgen

Ich hab mal etwas geforscht, da ich noch nie ein JavaScript selbst geschrieben hab weiss ich nicht ob ich jetzt alles richtig gemacht habe.
Scheinbar kommt man ums Tabben leider nicht rum ^^ onChange="moep()" die funktion wird wohl erst aufgerufen wenn ich das Feld verlasse.
Wenn doch, her damit

 

[Sven Mintel]

Versuchs stattdessen mal mit onkeyup.

 

[gordonk]

It works. !
mein Held

Danke schön.

Fast vergessen
wollte das fertige Script noch posten, für Verbesserungsvorschläge und die jenigen die etwas ähnliches benötigen

<script type="text/javascript">
function checkInput(e)
{    
	var _len =	e.value.length;
	var _name =	e.name;
	var _in = 	e.value;
    
    if (_in >= 0 && _in <= 255)
	{	
		if (_len == 3)
		{
			switch(_name)
			{
				case "ip_1":
								document.forms["protocol"].elements["ip_2"].focus();
					  			break;
				case "ip_2":
								document.forms["protocol"].elements["ip_3"].focus();
					  			break;
				case "ip_3":
								document.forms["protocol"].elements["ip_4"].focus();
					  			break;
			}
		}
	}
	else
	{
		alert('Zahl zwischen 0 und 255')
		e.value = "";
	}
}
</script>

<form name="protocol" action="wurst.php" method="post">
	<input name="ip_1" type="text" size="1" maxlength="3" onKeyUp="checkInput(this);"> .
	<input name="ip_2" type="text" size="1" maxlength="3" onKeyUp="checkInput(this);"> .
	<input name="ip_3" type="text" size="1" maxlength="3" onKeyUp="checkInput(this);"> .
	<input name="ip_4" type="text" size="1" maxlength="3" onKeyUp="checkInput(this);">
</form>

 

[Sven Mintel]

Hey, das find ich ja super, dass du auch das Ergebnis gepostet hast

Als zusätzliches Feature könntest du vielleicht noch zusätzlich den keyCode des keypress-Events abfragen, und so verhindern, dass überhaupt etwas anderes als Ziffern eingetragen werden können.

 

[gordonk]

Hi,
bin mir grad nicht sicher aber da ich bei onKeyUp prüfe ob die Eingabe zwischen 0 und 255 ist kann ich keine Buchstaben eingeben. Ansonsten habe ich hier eine function gefunden:

function kc(e)
{
	var keycode;

	if (window.event)
		keycode = window.event.keyCode;

	else if (e)
		keycode = e.which;

	else
		return true;

	// Zahlen
	if (47 < keycode && keycode < 58)
		return true;

	// Steuerzeichen
	var kcok = new Array(8, 10, 13, 46, 0);
	while (kcok.length > 0)
	{
		if (keycode == kcok.pop())
			return true;
	}

	return false;
}

Vielleicht kann man das ganze ja kombinieren.
Für meine Zwecke ( ein Störungsprotokoll erstellen ) ist das aber nicht relevant, da meine Arbeitkollege wohl garnicht erst versuchen da Buchstaben einzugeben^^