不允許不必要的字符在字段中輸入

我有一個文本字段，我只想在其中輸入數字。我用type =「number」，但我有一個問題，因爲我不能得到小數點。所以我使用了一個在線發現的指令來限制輸入的字母。不允許不必要的字符在字段中輸入

app.directive('onlyNum', function() { 
     return function(scope, element, attrs) { 

      var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57,110]; 
      element.bind("keydown", function(event) { 
       console.log($.inArray(event.which,keyCode)); 
       if($.inArray(event.which,keyCode) == -1) { 
        scope.$apply(function(){ 
         scope.$eval(attrs.onlyNum); 
         event.preventDefault(); 
        }); 
        event.preventDefault(); 
       } 

      }); 
     }; 
    })

它工作正常，但我可以輸入字符，如@，$，！，＃，&所以我on.How可以限制這些字符從投入也。

來源

2015-03-31 CraZyDroiD

注意，您可以用element.on做到這一點我的自定義指令（「的keydown」，...然後對於允許的鍵返回true，否則返回false。不需要$ apply，$ eval，event，preventDefault等 – Sam 2015-03-31 10:34:45

http://stackoverflow.com/questions/19036443/angularjs-how-to-allow-only- a-number-digits-and-decimal-point-to-be-typed-in – ABOS 2015-04-10 09:43:47

你可以聽你的元素上的input事件看，如果最後輸入的字符是通過定義允許的字符的array允許和檢查索引。如果字符是不允許的，將其刪除：

var element = document.getElementById("inputfield"); 
 
var inputText = ""; 
 
var allowedInputs = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']; 
 
    element.oninput = function (event) { 
 
    if(allowedInputs.indexOf(element.value.slice(event.srcElement.selectionEnd - 1, event.srcElement.selectionEnd)) == -1) 
 
     element.value = element.value.substr(0, event.srcElement.selectionEnd - 1) + element.value.substr(event.srcElement.selectionEnd); 
 
};

<input id="inputfield"/>

工作fiddle

您可以添加你要允許到陣列中的所有字符。

編輯：我更新了代碼，所以沒有不允許的字符可以在現有的字符之間輸入。

來源

2015-03-31 10:35:55 Markai

我可以在angularjs中使用它嗎？我應該在我的控制器中使用它嗎？ – CraZyDroiD 2015-03-31 10:40:30

@CraZyDroiD這是純js，所以你可以使用它與任何庫;） – Markai 2015-03-31 10:41:51

thnx它的工作！ – CraZyDroiD 2015-03-31 11:03:56

keyCode數組包含所有不需要字符的ASCII碼。你可以在那裏添加自己的數字，你可以從一個ASCII圖表中得到它們。例如@ = 64，$ = 36。請注意，大多數ASCII圖表只能給出十六進制值，但數組包含十進制數字。

編輯：This chart還包含十進制數字：

來源

2015-03-31 10:28:41 Alexander

這是可以用正則表達式很容易地調整，以適應任何需要

http://plnkr.co/edit/dgRJkVeX6iwIbXuoMVSW?p=preview

.directive("numberValidation", function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, ele, attrs, ctrl) { 
     ctrl.$parsers.unshift(function(value) { 
     if (value) { 
      var valid = value.match(/^\d+(,\d+)?$/) 
      ctrl.$setValidity('invalidNumber', valid); 
     } 
     return valid ? value : undefined; 
     }); 

    } 
    } 
});

來源

2015-03-31 10:49:08 maurycy

不允許不必要的字符在字段中輸入

回答

相關問題