検証（javascriptまたはangularjs）でmacアドレスのテキストボックスにコロンを自動的に挿入する方法はありますか？

Question

2桁ごとに自動的にコロン（:)を付ける必要があります。 だから、次のようになります。DD：A4：55：FD：56：CC

私はロジックを記述しているし、今私は同様にコロンを置くことができるが、私は、バックスペースキーを押していたとき、私はできませんよ結腸から戻る。

すでに筆記した2桁にカーソルを置くと2桁以上書くことができますが、これは嫌です。
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'); 
     } 
    } 

は、私を知ってください

は、ここに私のコードです。 ありがとう！事前に...

Answer 1

Regexを使用して簡単にすることができます。私はあなたの入力にデフォルト値を追加し、MACADDRESSの長さが有効であれば、このコード行を呼び出すボタンを追加しました：

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

コード：

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>