[Gelöst][JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

[Cyperfriend]

Ich bin gerade dabei ein Formular zu schreiben und es soll dabei nach jedem zweiten Zeichen automatisch ein Doppelpunkt eingefügt werden. Wenn jemand den Doppelpunkt nach zwei Zeichen schreibt soll das ignoriert werden. Ich vermute, dass man für diese Funktion das blöde JavaScript benötigt (Ich mag diese Scriptsprache einfach nicht) Wenn es eine Lösung direkt mit HTML / CSS oder PHP gibt wäre mir das natürlich lieber. Ich will die Doppelpunkte aber im Formular bereits sehen.

Ist das einfach zu realisieren oder braucht es dazu wieder Unmengen an komplizieren Code?

 

[epiphora]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Das ist zwar in PHP möglich, aber dann kannst Du die Doppelpunkte natürlich nicht in Echtzeit anzeigen lassen.

Es gibt sicher mehrere Möglichkeiten, um das in Javascript zu realisieren. Das hier wäre eine:

[src=javascript]document.getElementById('feld').addEventListener('keyup', function(){
var alt = this.value;
var neu = alt.replace(/:/g, '').replace(/(.{2})/g, '$1:').replace(/:$/, '');
if(alt != neu){
this.value = neu;
}
});[/src]

Wenn Du zufälligerweise eine MAC-Adresse formatieren willst, könnte man das auch noch anpassen, indem man die Länge beschränkt, nur 0-9 und a-f zulässt und den String in Lower- oder Uppercase umwandelt:

[src=javascript]document.getElementById('feld').addEventListener('keyup', function(){
var alt = this.value;
var neu = alt.toUpperCase().replace(/:/g, '').replace(/[^A-F0-9]/g, '').replace(/(.{2})/g, '$1:').replace(/:$/, '').substr(0, 17);
if(alt != neu){
this.value = neu;
}
});[/src]

 

[Cyperfriend]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Danke, werde ich später ausprobieren. Aber das Codebeispiel zeigt wiedermal, dass JavaScript einfach ein funktionierendes Etwas ist. Die Syntax kapiere ich kein bisschen. Die Befehle sind relativ klar.

 

[BurnerR]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

fyi, falls es das ist was du meinst:
Method Chaining ist nicht JS spezifisch.

 

[alter_Bekannter]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Warum fragst du nach Javascript wenn dir in PHP lieber wäre?
Sieht ein wenig anders auds aber inhaltlich ists nachher das gleiche, nein frag nicht mich, regex hat seine eigenen Regeln(die dann wohl laut dem was ich gehört hab noch von Sprache zu Sprache variieren) die ich nicht verstehe.

In der simpelsten Variante einfach alle ":" löschen String in alle 2 Zeichen Splitten, nach jedem Eintrag ein ":" einfügen und fertig.

 

[LemonDrops]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Eine ordentliche Lösung wäre es nicht die Doppelpunkte hinzu zu fügen, sondern ein eigenes Eingabefeld für jeden Teil der z. B. Mac Adresse zu haben und die Doppelpunkt dazwischen anzuzeigen. Dann leitet man den Input nach der entsprechende Menge an Zeichen ins nächste Feld. Man kann auch copy/paste handeln. Der User weiß was zu tun ist und kann keine invaliden Daten eingeben.

 

[Cyperfriend]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

@alter_Bekannter: Weil ichs eben schon im Formular so sehen will.

@LemonDrops: Dein Vorschlag hört sich gut an. Du meinst also, dass man im <input>-Feld schon die Doppelpunkte vorgibt und beim Eintragen der MAC diese einfach übersprungen werden? Das wäre natürlich die absolut perfekte Lösung, vor allem, wenn man dann Copy/Pase machen könnte. Wenn aber jemand den Doppelpunkt trotzdem schreibt muss das natürlich ignoriert werden.

Wie würde den der entsprechende PHP-Code dazu aussehen? Ich dachte für solche Fälle kann man nur JavaScript benutzen, da PHP ja eine serverseitige Scriptsprache ist, während die Eingabe ja auf der Benutzerseite erfolgt.

Edit: Ich hätte aber schon gerne ein <imnput>-Feld und nicht acht.

 

[epiphora]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Das wäre natürlich die absolut perfekte Lösung, vor allem, wenn man dann Copy/Pase machen könnte.

Das Problem sehe ich ebenfalls. Man kann die Werte dann weder vernünftig rein- noch rauskopieren. Eine Mac-Adresse ist ja auch nur ein Wert, imho sollte man für jeden Wert ein einzelnes Feld bereitstellen.

 

[evillive]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

hier ein Minimalbeispiel für Copy und Paste

[src=javascript]<form>
<input id="f0" type="text" size="2">
<input id="f1" type="text" size="2" maxlength="2">
<input id="f2" type="text" size="2" maxlength="2">
<input id="f3" type="text" size="2" maxlength="2">
</form>

<script>
document.getElementById('f0').addEventListener('keyup', function(){
var alt = this.value;
var q = 0;
var p = 2;
if (alt.length > 2) {
for (var i = 0; i < alt.length; i++) {
document.getElementById('f' + i).value = alt.substring(q, p);
q = p;
p += 2;
}
}
});
</script>[/src]

 

[epiphora]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

hier ein Minimalbeispiel für Copy und Paste

Und wo ist da copy?

 

[LemonDrops]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Warum sollte man aus einem Inputfeld etwas heraus kopieren? Solche Felder sind zur Eingabe gedacht, das Problem existiert gar nicht. Ein einfache Lösung wäre es trotzdem, die Eingabe unter den Feldern aus zugeben.

 

[Cyperfriend]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Ich habe jetzt gerade das zweite Beispiel von epiphora probiert, aber es funktioniert sowohl unter Firefox 32, als auch unter dem IE 11 nicht. JavaScript ist zugelassen.
So habe ich es eingebaut:
[src=html5]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testformular</title>
<script type="text/javascript">

document.getElementById('feld').addEventListener('keyup', function(){
var alt = this.value;
var neu = alt.toUpperCase().replace(/:/g, '').replace(/[^A-F0-9]/g, '').replace(/(.{2})/g, '$1:').replace(/:$/, '').substr(0, 17);
if(alt != neu){
this.value = neu;
}
}
);
</script>
</head>

<body>
<form action="#" method="post">
<label for="feld">MAC-Adresse</label>
<input type="text" name="feld" id="feld">
</form>
</body>
</html>
[/src]

 

[epiphora]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Der Javascript-Code wird ausgeführt, noch ehe das input-Feld existiert. Daher kann der Event-Handler nicht erzeugt werden. Der folgende Code müsste funktionieren:


[src=html5]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testformular</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('feld').addEventListener('keyup', function(){
var alt = this.value;
var neu = alt.toUpperCase().replace(/:/g, '').replace(/[^A-F0-9]/g, '').replace(/(.{2})/g, '$1:').replace(/:$/, '').substr(0, 17);
if(alt != neu){
this.value = neu;
}
}
);
};
</script>
</head>

<body>
<form action="#" method="post">
<label for="feld">MAC-Adresse</label>
<input type="text" name="feld" id="feld">
</form>
</body>
</html>
[/src]

 

[LemonDrops]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Die Lösung ist nicht Nutzerunfreundlich, hier eine Lösung die es ist:

http://jsfiddle.net/4c7m7awo/

Man kann dem Nutzer genau zeigen was man erwartet und wo er sich ggf. vertippt hat, da man jedes Byte einzeln validieren kann. Das sind die zwei wichtigsten Anforderungen an Formulare. Außerdem kann der Nutzer valide Adressen einfügen. Kopieren ist, wie gesagt, gar keine Anforderung. Mir fällt jedenfalls keine Situation ein, in der das nötig werden könnte, da man die Daten, die man dort eingibt, schon haben muss. Die von mir angesprochene Lösung habe ich trotzdem dazu gepackt.

Eine weitere Lösung, wenn kopieren (warum auch immer) wichtig ist, wäre es per "contenteditable" Attribut normale Elemente (z. B. divs) als Input zu nehmen und diese Eingaben in ein verdecktes Inputfeld zu kopieren.

 

[Cyperfriend]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

Die korrigierte Fassung von epiphora ist genau das, was ich wollte. Danke dafür.

 

[epiphora]

Re: [JavaScript] Nach jedem zweiten Zeichen automatisch ein Doppelpunkt

@LemonDrops: Interessant, dass die Meinungen dabei so weit auseinander gehen. Denn ich würde auch das noch lange nicht als nutzerfreundlich erachten, weil einfach zwei wichtige Features fehlen, die jedes normale Textfeld hat: 1. Backspace funktioniert nicht und 2. kann man nicht einfach ein Zeichen nachtragen, wenn man mitten in der Adresse beim Eintragen eins vergessen hat.

 

[BurnerR]

Ich aus reiner Nutzersicht finde das von LemonDrops äußerst nutzerfreundlich.
epiphora: Man kann doch z.B. mit Tab durch die Felder navigieren.

 

[Kampfmelone]

Ich fände das ganze in einem einzigen Textfeld am praktischsten. So geht rein/rauskopieren in allen browsern und systemen, ohne js dann eben ohne automatische Doppelpunkte.

 

[BurnerR]

So aus reinem Interesse:
Gibt es gar nicht irgendwelche Normen oder mindestens Best Practice oder referenz-implementierungen für solche UI Fragen?
Für PC GUIs gibts das ja gar nicht die können sich ja nichtmal darauf einigen ob die Fensterbuttons oben links oder oben rechts hingehören etc.
Aber vllt ist das bei Online Geschichten anders?