使用Angular幫助用戶以某種格式輸入數據？

我在StackOverflow上閱讀了關於如何使用「格式化程序」和「分析程序」以允許用戶在輸入中輸入值，然後在模型中轉換該輸入的問題和解答。使用Angular幫助用戶以某種格式輸入數據？

我有一個稍微不同的要求。

我希望幫助並強制用戶以某種格式輸入輸入。換句話說，顯示器和模型應該完全匹配，但用戶應限制以指定格式輸入數據。

要使用一個常見的例子，我希望用戶在下面的格式輸入十位電話號碼：

(xxx)xxx-xxxx

從一個jQuery背景的，我知道我可以一個事件附加到輸入的「更改」事件處理程序並執行字符串處理，以便在輸入中查找十位數字，並按指定的格式對其進行格式化，或者如果數字中不包含十位數字，則會向用戶顯示錯誤。

我也知道我可以使用Angular對輸入進行限制，以便表單不會提交，除非輸入的格式符合規範。這具有的主要缺點是用戶可能會填寫整個表單，然後被告知對前一個字段進行更改，從而中斷用戶的工作流程。

我想更進一步，一旦鍵入號碼就自動格式化數字。Angular的哪些功能最適合此任務？

使用案例：用戶輸入「9006345789」。代碼應該或者當用戶鍵入數字時，或者當用戶將焦點從輸入移開時，用「（900）634-5789」代替「9006345789」。如果用戶輸入「900-634-5789」或「900.634.5789」或任何其他具有十位數字的輸入，結果應該是相同的。

請記住，電話號碼示例是許多格式化示例之一，我希望我的代碼可以重複使用。

來源

2015-09-11 Daniel Allen Langdon

什麼輸入型數字強制用戶只輸入數字。你可以在使用過濾器將它發送到服務器時對其進行格式化。你真的需要重新格式化以向用戶顯示預期的格式嗎？ – Okazari

@Okazari，這是要求給我的方式。 –

您是否想要即時更改價值或輸入失去焦點時？ –

實際上，我們可以使用Angularjs格式化數字，並附上了以下工作鏈接。

我創建了一個指令我在輸入字段中使用（因爲我們可以在我的地方使用它）。
我創建了一個過濾將格式化數字用戶類型的輸入字段

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.currencyVal; 
 
}).directive('phoneInput', function($filter, $browser) { 
 
    return { 
 
    require: 'ngModel', 
 
    link: function($scope, $element, $attrs, ngModelCtrl) { 
 
     var listener = function() { 
 
     var value = $element.val().replace(/[^0-9]/g, ''); 
 
     $element.val($filter('tel')(value, false)); 
 
     }; 
 

 
     // This runs when we update the text field 
 
     ngModelCtrl.$parsers.push(function(viewValue) { 
 
     return viewValue.replace(/[^0-9]/g, '').slice(0, 10); 
 
     }); 
 

 
     ngModelCtrl.$render = function() { 
 
     $element.val($filter('tel')(ngModelCtrl.$viewValue, false)); 
 
     }; 
 

 
     $element.bind('change', listener); 
 
     $element.bind('keydown', function(event) { 
 
     var key = event.keyCode; 
 
     if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) { 
 
      return; 
 
     } 
 
     $browser.defer(listener); 
 
     }); 
 

 
     $element.bind('paste cut', function() { 
 
     $browser.defer(listener); 
 
     }); 
 
    } 
 

 
    }; 
 
}); 
 
myApp.filter('tel', function() { 
 
    return function(tel) { 
 
    console.log(tel); 
 
    if (!tel) { 
 
     return ''; 
 
    } 
 

 
    var value = tel.toString().trim().replace(/^\+/, ''); 
 

 
    if (value.match(/[^0-9]/)) { 
 
     return tel; 
 
    } 
 

 
    var country, city, number; 
 

 
    switch (value.length) { 
 
     case 1: 
 
     case 2: 
 
     case 3: 
 
     city = value; 
 
     break; 
 

 
     default: 
 
     city = value.slice(0, 3); 
 
     number = value.slice(3); 
 
    } 
 

 
    if (number) { 
 
     if (number.length > 3) { 
 
     number = number.slice(0, 3) + '-' + number.slice(3, 7); 
 
     } else { 
 
     number = number; 
 
     } 
 

 
     return ("(" + city + ") " + number).trim(); 
 
    } else { 
 
     return "(" + city; 
 
    } 
 

 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="body" ng-app="myApp"> 
 
    <div class="wrapper" ng-controller="MyCtrl"> 
 
     <div class="info">PHONE: {{phoneVal | tel}}</div> 
 
     <input class="input-phone" type='text' phone-input ng-model="phoneVal" /> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

希望它可以幫助你:)

來源

2015-09-11 15:34:09 Thinker

這與我想要的類似，但有一個主要區別。在我的要求中，顯示器和模型都應該讀取'（900）6345789'，但看起來你的代碼產生了一個帶有'9006345789'的模型。我需要兩個和模型和視圖'（900）634-5789' –

我也遇到了一個比較嚴重的問題：如果用戶在電話號碼的* middle *中輸入一個數字，光標跳轉到輸入結束。 –

使用Angular幫助用戶以某種格式輸入數據？

回答

相關問題