javascript - テキスト入力は、angularjs の整数入力のみを許可します

Question

整数入力のみ<input type="number" />を許可するようにhtml入力[数値]を設定したい（フロートではない）。

基本的に、html input[number] allow '.' フロート入力用に入力する必要がありますが、それは望ましくありません。

AngularJSでそれを達成する簡単な方法はありますか?

Answer 1

これを実現する方法を次に示します。

1. 入力タイプ - 'text'

   指令：

   app.directive('onlyNumbers', function () {
       return  {
           restrict: 'A',
           link: function (scope, elm, attrs, ctrl) {
               elm.on('keydown', function (event) {
                   if(event.shiftKey){event.preventDefault(); return false;}
                   //console.log(event.which);
                   if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                       // backspace, enter, escape, arrows
                       return true;
                   } else if (event.which >= 48 && event.which <= 57) {
                       // numbers 0 to 9
                       return true;
                   } else if (event.which >= 96 && event.which <= 105) {
                       // numpad number
                       return true;
                   } 
                   // else if ([110, 190].indexOf(event.which) > -1) {
                   //     // dot and numpad dot
                   //     return true;
                   // }
                   else {
                       event.preventDefault();
                       return false;
                   }
               });
           }
       }
   });
   

   HTML:

   <input type="text" only-numbers>
   

2. 入力タイプ - 'number'

   指令：

   app.directive('noFloat', function () {
   return  {
       restrict: 'A',
       link: function (scope, elm, attrs, ctrl) {
           elm.on('keydown', function (event) {
             if ([110, 190].indexOf(event.which) > -1) {
                   // dot and numpad dot
                   event.preventDefault();
                   return false;
               }
               else{
                 return true;
               }
           });
       }
   }
   });
   

   HTML: <input type="number" step="1" no-float>

プランカーをチェック

Answer 2

パターン プロパティを使用:

<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>

デモをご覧ください: https://jsfiddle.net/JBalu/vfbgrd5n/

役立つかもしれません。

Answer 3

(function () {
    angular
    .module('urModule').directive('numbersOnly', numbersOnly);
    function numbersOnly() {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {
                function fromUser(text) {
                    if (text) {
                        var transformedInput = text.replace(/[^0-9]/g, '');

                        if (transformedInput !== text) {
                            ngModelCtrl.$setViewValue(transformedInput);
                            ngModelCtrl.$render();
                        }
                        return transformedInput;
                    }
                    return undefined;
                }
                ngModelCtrl.$parsers.push(fromUser);
            }
        };
    }
})();

Answer 4

input[type=number]定義により、入力として整数のみを受け入れます。自分で試してみてください。文字を入力してみてください。

JavaScript は既に組み込まれているため、必要ありませんinput[type=text]。

angularディレクティブを介してそれを実現できます。次のようになります（ただし、私の構文についてはわかりません）

app.directive('onlyNumbers', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind("keydown", function(event) {
                if ((event.keyCode > 47 && event.keyCode < 58) && !event.shiftKey) {
                    event.preventDefault();
                    return false;
                }
            });
        }
    });

構文に多少の誤りがあるかもしれませんが、基本的な式を分解します。

attribute入力要素を扱っているので、ディレクティブを使用するのは理にかなっています。restrictこれを行うには、プロパティを Aに設定します。

キー押下イベントをリッスンするので、link関数を使用する必要があります。keydownキーが押され始めたことを検出するために、イベントをリッスンします。

ユーザーが数字を入力したかどうかを調べるには、 を使用keyCodesします。数字キーは 48 から 57 で、それぞれ 0 から 9 を表します。ただし、数字キーを押す必要がある特殊文字は考慮していません。そのため、シフト キーも押されていないことを確認します。

次に、このディレクティブを入力要素の属性として追加できます。

<input type="text" only-numbers />