Question

我试图制作一个自定义指令，只允许在 输入类型=＆＃39; tel＆＃39; 中输入数字。那么在Ionic 1（angular1）中我使用了如下指令，它有效地工作了

.directive('onlyDigits', function() {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, modelCtrl) {
          modelCtrl.$parsers.push(function(inputValue) {
            if (inputValue == undefined) return '';
            var transformedInput = inputValue.replace(/[^0-9]/g, '');
            if (transformedInput !== inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
            }
            return transformedInput;
          });
      }
  };
})

现在在Ionic 3（angular5）中，我尝试使用以下代码重新创建相同的指令。

import { Directive, ElementRef, Output, Renderer, HostListener, EventEmitter } from '@angular/core';
@Directive({ selector: '[onlyDigits]' })
export class DigitsDirective {
    constructor(public elementRef: ElementRef, public renderer: Renderer) {}

    @Output() onlyDigits = new EventEmitter();

    @HostListener("keyup", ["$event.target.value"])
    onKeyup(value) {
        if (value == undefined) return '';
        var transformedInput = value.replace(/[^0-9]/g, '');
        if (transformedInput !== value) {
          this.onlyDigits.emit(transformedInput);
        }
    }
}

这种方法有效，但有一个问题。由于 keyup 事件，它首先将非数字字母添加到输入类型然后将其删除。在上面的离子1指令中，如果我们按下非数字值，它不会让该值进入输入类型，但是首先在Ionic 3中，该值被添加到输入类型中而不是它被移除，我不会这样做。我想要！如何实现这一壮举？

Answer 1

创建了一个仅允许数字的自定义指令。（对于离子3）这个解决方案对我有用。请尝试以下代码。

     import { Directive, ElementRef, HostListener, Output, EventEmitter } 
     from '@angular/core';

     @Directive({
     selector: '[onlyDigits]' // Attribute selector
     })
     export class OnlyDigitsDirective {

     constructor(private _el: ElementRef) {
     console.log('Hello OnlyDigitsDirective Directive');
     }
     @Output() onlyDigits = new EventEmitter();

     @HostListener('keydown', ['$event']) onKeyDown(event) {
     let e = <KeyboardEvent>event;

     if (e.key == "0" || e.key == "1" || e.key == "2" || e.key == "3" || 
         e.key == "4" || e.key == "5" || e.key == "6" || e.key == "7" || 
         e.key == "8" || e.key == "9" || e.key == "Backspace") {
         // Do Nothing
         console.log("e.key: " + e.key);
         } else {
         // does not allow 
           e.preventDefault();
          }

        }


      }

Answer 2

我不知道你是否想要另一种方式，但我用jquery解决了这个问题。

npm install -g typings typings安装dt~jquery --global --save

jquery解决方案：

 $('#YOUR_ID').on('textInput', e => {    
    var keyCode = e.originalEvent.data.charCodeAt(0);                       
    if(!(keyCode>64 && keyCode<91) && !(keyCode>96 && keyCode<123) && !(keyCode>127 && keyCode<166) ){
      e.preventDefault();
    }
  });

Answer 3

哦不，nonono @ berk-akkerman，不要在Angular中使用jquery！不要那样做！我严格禁止你！

这是使用NgModel的一种简单方法，但请记住，验证器可能会为您提供更好的用户体验，即。让用户输入任何内容，但如果字段无效则显示错误信息，并且不要让它们提交。

组件

data = {numberValue: 0};
ensureNumber(val:any) {
    return (''+val).replace(/[^0-9]/g, '');
}

模板

<input type="number" [ngModel]="data.numberValue"
 (ngModelChange)="data.numberValue=ensureNumber($event)"/>

如何只允许在输入类型中输入数字（0-9）＆＃39; tel＆＃39; using directive - Ionic 3 Angular 5

3 个答案: