Question

我需要限制输入字段，使其不接受字符和特殊符号。仅接受数字和2个或多个小数或句点（。）。

注意*即使在输入栏中也不能输入字符。

html：-

<mat-form-field>
                <input matInput onkeypress="return isNumberKey(this, event);" placeholder="JNDI Name" formControlName="jndiName" [(ngModel)]="body.jndiName" autocomplete="off">
              </mat-form-field>

ts：-

isNumberKey(txt, evt) {

    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
            return true;
        } else {
            return false;
        }
    } else {
        if (charCode > 31
             && (charCode < 48 || charCode > 57))
            return false;
    }
    return true;
}

我想要一个输入字段，在该输入字段中我可以在该字段中至少键入4个数字和点（但是），但是我不想让我的表单字段接受字符或特殊符号。它将仅接受数字和点。

Answer 1

您要寻找的是HTML input pattern。

pattern属性指定一个正则表达式，在表单提交时会检查该元素的值。

对于IP验证，您可以使用以下正则表达式：^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)

修改：
为了忽略除您想要的键以外的任何其他键，您可以使用类似this的键。

@Directive( {
    selector : '[allow-keys]',
    host : {
        '(keydown)' : 'onKeyUp($event)'
    }
} )
export class AllowKeysDirective {
    @Input( 'allow-keys' ) allowKeys;
    onKeyUp ( $event ) {
        if ( this.allowKeys && !this.allowKeys.includes( $event. keyCode ) ) {
            $event.preventDefault();
        }
    }
}

与我在评论中描述的方式相比，这是一种更“类似于角度”的方式来处理忽略键击。我创建了example来演示其用法。

如何将输入限制为文本框，使其仅接受数字和小数点（至少4位小数，例如192.168.192.192）？

1 个答案: