it-swarm.com.de

Wie füge ich alle 4 Zeichen ein Leerzeichen für die IBAN-Registrierung ein?

Ich bin wirklich neu in JavaScript und möchte meinem Eingabetext Leerzeichen für die Registrierung eines IBAN-Kontos hinzufügen.

<input type="text" name="iban" onkeyup="if(this.value.length > 34){this.value=this.value.substr(0, 34);}" />

Da ist mein Eingabefeld; könnte mir jemand sagen, wie ich das machen kann?

23
Jackyto

Die vorhandenen Antworten sind relativ lang und sehen aus wie Überkillen. Außerdem funktionieren sie nicht vollständig (ein Problem besteht beispielsweise darin, dass Sie keine vorherigen Zeichen bearbeiten können).

Für Interessierte nach Wikipedia :

Zulässige IBAN-Zeichen sind die Ziffern 0 bis 9 und die 26 lateinischen Großbuchstaben A bis Z.

Hier ist eine relativ kurze Version, die den vorhandenen Antworten ähnelt:

document.getElementById('iban').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />


Wie bereits erwähnt, besteht der Nachteil darin, dass Sie keine vorherigen Zeichen bearbeiten können. Wenn Sie dies korrigieren möchten, müssen Sie die aktuelle Position des Caret-Objekts abrufen, indem Sie zunächst auf die Eigenschaft selectionEnd zugreifen und anschließend die Position des Caret-Objekts after setzen, auf das die Regex-Formatierung angewendet wurde.

document.getElementById('iban').addEventListener('input', function (e) {
  var target = e.target, position = target.selectionEnd, length = target.value.length;
  
  target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
  target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

Sie werden bemerken, dass es ein kleines Problem gibt, wenn der Charakter nach dem Caret ein Leerzeichen ist (da das Leerzeichen beim ersten Abrufen der Caret-Position zunächst nicht berücksichtigt wurde). Um dies zu korrigieren, wird die Position manuell erhöht, wenn das nachfolgende Zeichen ein Leerzeichen ist (vorausgesetzt, ein Leerzeichen wurde tatsächlich hinzugefügt - was durch Vergleichen der Länge vor und nach dem Ersetzen der Zeichen bestimmt wird).

53
Josh Crozier

Bei Verwendung von Normal-JavaScript würde ich vorschlagen:

function space(el, after) {
    // defaults to a space after 4 characters:
    after = after || 4;

    /* removes all characters in the value that aren't a number,
       or in the range from A to Z (uppercase): */
    var v = el.value.replace(/[^\dA-Z]/g, ''),
    /* creating the regular expression, to allow for the 'after' variable
       to be used/changed: */
        reg = new RegExp(".{" + after + "}","g")
    el.value = v.replace(reg, function (a, b, c) {
        return a + ' ';
    });
}

var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
    space(this, 4);
});

JS Fiddle Demo .

Etwas verspätet schrieb ich die oben beschriebenen Zeilen um, anstatt mit DOM-Knoten:

function space(str, after) {
    if (!str) {
        return false;
    }
    after = after || 4;
    var v = str.replace(/[^\dA-Z]/g, ''),
        reg = new RegExp(".{" + after + "}", "g");
    return v.replace(reg, function (a) {
        return a + ' ';
    });
}

var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
    this.value = space(this.value, 4);
});

JS Fiddle Demo .

Verweise:

13
David Thomas

für Tausende auf Winkel 4 in einer Rohrleitung integer = integer.replace (/ [^\dA-Z]/g, '') .replace (/ (. {3})/g, '$ 1'.)

1
user8857162

Sie müssen jede 4-stellige Gruppe erfassen und dann zwischen jede Gruppe ein Leerzeichen setzen.

  $('input').blur(function () {
  //Replace each group 4 digits  with a group plus a space
        var reformat = this.value.replace(/(\d{4})/g, function(match){
        return match + " ";
        });
        this.value = reformat;
    })

Und das hier wird beim Tippen aktualisiert 

//Keys pressed 0 times
var downed = 0; 
$('#test').keydown(function () {
    downed++;
    if(downed == 3){
        var reformat = this.value.replace(/(\d{4}\s*)/g, function(match){
            //Strip spaces
            if(match.match(/\s/)){return match;}
            return match + " ";
    });
    console.log(reformat);
    this.value = reformat; 
    //Start recount
        downed = 0;
    }
});

Schauen Sie sich die Geige an

1
raam86

Der Code von Josh Crozie ist wirklich schön, aber nicht vollständig.

Zwei Probleme damit; 

  • Wenn das Caret nicht am Ende ist, sondern z. an der vorletzten Position, und der Benutzer beginnt zu tippen, manchmal bleibt das Caret nicht an der vorletzten Position
  • Ein weiteres Problem betrifft Geräte mit Android 7+. Diese Geräte aktualisieren die Caret-Position etwas später, das heißt, sie benötigen ein setTimeout (), um die Caret-Position auszulesen

Der folgende Code basiert auf dem Code von Josh Crozie. Die beiden oben genannten Probleme wurden behoben und zur besseren Lesbarkeit etwas ausführlicher: 

var isAndroid = navigator.userAgent.indexOf("ndroid") > -1;
var element = document.getElementById('iban');

element.addEventListener('input', function () {
    if (isAndroid) {
        // For Android 7+ the update of the cursor location is a little bit behind, hence the little delay.
        setTimeout(reformatInputField);
        return;
    }
    reformatInputField();
});

function reformatInputField() {
    function format(value) {
        return value.replace(/[^\dA-Z]/gi, '')
            .toUpperCase()
            .replace(/(.{4})/g, '$1 ')
            .trim();
    }
    function countSpaces(text) {
        var spaces = text.match(/(\s+)/g);
        return spaces ? spaces.length : 0;
    }

    var position = element.selectionEnd;
    var previousValue = element.value;
    element.value = format(element.value);

    if (position !== element.value.length) {
        var beforeCaret = previousValue.substr(0, position);
        var countPrevious = countSpaces(beforeCaret);
        var countCurrent = countSpaces(format(beforeCaret));
        element.selectionEnd = position + (countCurrent - countPrevious);
    }
}
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" size="35" />

1
Rob Juurlink

Ich brauche dasselbe aber für BVR/BVR + swiss-Zahlungsformular ..__ Also brauche ich alle 5 Zeichen ein Leerzeichen aber vom Ende des Strings .

Beispiel: "52 86571 22001 00000 10520 15992" oder manchmal kürzer als "843 14293 10520 15992".

Hier ist die Lösung, indem Sie die Zeichenfolge vor und nach dem Hinzufügen von Leerzeichen umkehren, wenn rev = 1.

function space(str, stp, rev) {
    if (!str) {
        return false;
    }
    if (rev == 1) {
        str = str.split('').reverse().join('');
    }
    if(stp > 0) {
        var v = str.replace(/[^\dA-Z]/g, ''),
            reg = new RegExp(".{" + stp + "}", "g");
        str = v.replace(reg, function (a) {
            return a + ' ';
        });
    }
    if (rev == 1) {
        str = str.split('').reverse().join('');
    }
    return str;
}

Benutzen : 

var refTxt = space(refNum, 5, 1);
0
Meloman

Dies ist die kürzeste Version, die JQuery bei der Eingabe mit dem Typ number oder tel verwendet:

$('input[type=number], input[type=tel]').on('input', function (e) {
     e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

Sie können die 4 auch in ein beliebiges anderes Zeichenlimit ändern.

0
AlexioVay