유효성 검사 (javascript 또는 angularjs)가있는 MAC 주소의 텍스트 상자에 콜론을 자동으로 넣는 방법은 무엇입니까?

Question

두 자리마다 콜론 (:)을 자동으로 넣어야합니다. 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를 사용하여 간단하게 할 수 있습니다. 나는 당신의 입력에 기본값을 추가하고, MAC 주소의 길이가 유효한 경우 코드 행을 호출하는 버튼을 추가 :

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>