Comment mettre deux points automatiquement dans la zone de texte pour l'adresse mac avec validation (javascript ou angularjs)?

Question

Je dois mettre deux points (:) automatiquement après tous les deux chiffres. Il ressemblera: DD: A4: 55: FD: 56: CC

J'ai écris une logique et maintenant je suis en mesure de mettre deux points aussi, mais quand je suis pressais backspace Je ne suis pas en mesure pour revenir du côlon.

Et il permet d'écrire plus de deux chiffres quand je mets le curseur sur deux chiffres déjà écrits, ce que je ne veux pas.

Voici mon code:
HTML:

<input type="text" ng-model="mac.macAddress" name="macAddress" id="macAddress" 
      maxlength="17" ng-change="macAddressFormat(mac)"> 

JS:

$scope.macAddressFormat = function(mac){ 

     var macAddress = mac.macAddress; 

     var filteredMac = macAddress.replace(/\:/g, ''); 
     var length = filteredMac.length; 

     if(length % 2 == 0 && length > 1 && length < 12){ 
      mac.macAddress = mac.macAddress + ':'; 
     } 
     else{ 
      console.log('no'); 
     } 
    } 

S'il vous plaît, me savoir où je me trompe. Merci! à l'avance ...

Answer 1

Vous pouvez simplifier l'utilisation de Regex. J'ai ajouté une valeur par défaut à votre entrée et a ajouté un bouton qui appellera cette ligne de code si la longueur de la MacAddress est valide:

macAddr.replace(/(.{2})/g,"$1:").slice(0,-1).toUpperCase(); 

Le code:

var app = angular.module("macformat", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.macAddressFormat = function(mac){ 
 

 
    mac.macAddress = mac.macAddress.toUpperCase(); 
 
    var macAddr = mac.macAddress; 
 
    var alphaNum= /^[A-Za-z0-9]+$/; 
 

 
    // The Input will be changed only if the length is 12 and is alphanumeric 
 
    if(macAddr.length == 12 && alphaNum.test(macAddr)){ 
 
    
 
     // A lot is going on here. 
 
     // .replace(/(.{2})/g,"$1:") - adds ':' every other 2 characters 
 
     // .slice(0,-1) - cuts the last character, because ':' is added 
 
     // .toUpperCase() - because it's good practice for writing MAC Addresses 
 
     macAddr = macAddr.replace(/(.{2})/g,"$1:").slice(0,-1).toUpperCase(); 
 
    
 
     // Place Formatted MAC Address to Input 
 
     mac.macAddress = macAddr; 
 
     console.log("Tadaaa"); 
 
    } 
 
    // Developer info in console if length is not 12 
 
    else if (macAddr.length < 12 && alphaNum.test(macAddr)){ 
 
     console.log(12 - macAddr.length + " characters left"); 
 
    } 
 
    else if (macAddr.length > 12 && alphaNum.test(macAddr)){ 
 
     console.log(macAddr.length - 12 + " characters too many"); 
 
    } 
 
    // Developer info in console if macAddress contains non alpha-numeric 
 
    else if (!alphaNum.test(macAddr)){ 
 
     console.log("only alpha-numeric allowed"); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div ng-app="macformat" ng-controller="myCtrl"> 
 
    <p>Write MAC Address here without ":" and it will be formatted automatically:</p> 
 
    <input type="text" ng-model="mac.macAddress" name="macAddress" id="macAddress" 
 
      maxlength="17" ng-change="macAddressFormat(mac)"> 
 
    <p><i>Check console for info</i></p> 
 
</div>