web-dev-qa-db-fra.com

Comment insérer un espace tous les 4 caractères pour l'enregistrement IBAN?

Je suis vraiment nouveau en JavaScript et je voudrais ajouter à mon texte d'entrée l'insertion d'espace pour l'enregistrement d'un compte IBAN.

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

Il y a mon champ d'entrée; quelqu'un pourrait-il me dire comment je peux le faire?

javascriptregex
23
Jackyto

Les réponses existantes sont relativement longues et ressemblent à une tuerie excessive. De plus, ils ne fonctionnent pas complètement (par exemple, vous ne pouvez pas modifier les caractères précédents).

Pour les intéressés, selon Wikipedia :

Les caractères IBAN autorisés sont les chiffres de 0 à 9 et les 26 caractères alphabétiques latins majuscules de A à Z.

Voici une version relativement courte semblable aux réponses existantes:

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" />

Comme indiqué ci-dessus, le problème est que vous ne pouvez pas revenir en arrière et modifier les caractères précédents. Si vous voulez résoudre ce problème, vous devez récupérer la position actuelle du curseur en accédant initialement à la propriété selectionEnd, puis en définissant la position du caret après que la mise en forme de l'expression rationnelle a été appliquée.

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" />

Vous remarquerez qu'il y a un léger problème lorsque le caractère après le curseur est un espace (car l'espace n'a pas été pris en compte lors de la récupération initiale de la position du curseur). Pour résoudre ce problème, la position est incrémentée manuellement si le caractère suivant est un espace (en supposant qu'un espace a effectivement été ajouté - ce qui est déterminé en comparant la longueur avant et après le remplacement des caractères).

53
Josh Crozier

En utilisant plain-JavaScript, je suggérerais:

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);
});

Démo de JS Fiddle .

Un peu tardivement, ma réécriture de ce qui précède pour gérer les chaînes plutôt que les nœuds DOM:

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);
});

Démo de JS Fiddle .

Références:

13
David Thomas

pour des milliers sur 4 angulaire dans un tuyau entier = entier.replace (/ [^\dA-Z]/g, '') .replace (/ (. {3})/g, '$ 1.'). trim ();

1
user8857162

Vous devez capturer chaque groupe de 4 chiffres, puis mettre un espace entre chaque groupe.

  $('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;
    })

Et celui-ci se met à jour lors de la frappe 

//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;
    }
});

Découvrez le fiddle

1
raam86

Le code de Josh Crozie est vraiment gentil, mais pas complet.

Deux problèmes avec elle; 

  • Si le signe n'est pas à la fin mais par ex. avant la dernière position et que l'utilisateur commence à taper, parfois le curseur ne reste pas à la dernière position
  • Un autre problème concerne les appareils Android 7+. Ces appareils mettent à jour la position du curseur un peu plus tard, ce qui signifie qu'il faut un setTimeout () avant de lire l'emplacement du curseur.

Le code ci-dessous est basé sur le code de Josh Crozie, avec les deux problèmes mentionnés ci-dessus corrigés et un peu plus détaillé pour des raisons de lisibilité: 

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

J'ai besoin de la même chose mais pour BVR/BVR + formulaire de paiement suisse . Donc, ce dont j'ai besoin, c'est d'ajouter un espace tous les 5 caractères mais à la fin de la chaîne .

Exemple: "52 86571 22001 00000 10520 15992" ou parfois plus court comme "843 14293 10520 15992".

Donc, voici la solution en inversant la chaîne avant et après l'ajout d'espaces si 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;
}

Utilisation : 

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

Il s'agit de la version la plus courte utilisant JQuery pour une entrée de type number ou tel:

$('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();
});

Vous pouvez également modifier le nombre de 4 pour n’importe quelle autre limite de caractères souhaitée.

0
AlexioVay