javascript - 如何在Angular的textarea中只允许ASCII字符

问题描述

我是一名有抱负的全栈开发人员，拥有后端经验。我基于 Angular 构建的应用程序有一个允许非 ASCII 字符的文本区域。现在的要求是只允许 ASCII 字符。

我的后端大脑想到了在将数据发送到后端之前使用正则表达式去除非 ASCII 字符并过滤 ASCII 字符。然而 PO 有一个不同的想法，她希望文本区域中只允许 ASCII 字符，而不是过滤它。

常见的用例是用户从其他文档中复制粘贴备注或信息，同时复制非 ASCII 字符。有没有办法处理这个。我找不到任何开箱即用的 Agular 或 HTML 标签，但我还是前端的初学者。

任何指针表示赞赏。代码如下（class="dialog-panel__content"的div对应文本区）：

<div 
    class="dialog-panel__close"
    aria-label="Close" 
    data-selector="dialog-close"
    *ngIf="showCloseButton" 
    (click)="onClose()">
</div>

<div class="dialog-panel__header">
    <ng-content select="[dialog-header]"></ng-content>
</div>

<div class="dialog-panel__content" [ngClass]="{'scroll':dialog.config.enableScroll}">
    <ng-content></ng-content>
</div>

<div class="dialog-panel__footer">
    <ng-content select="[dialog-footer]"></ng-content>
</div>

组件类代码如下：

从'@angular/core'导入{组件，HostBinding，输入，OnInit}；从'@core/helpers/dialog/dialog'导入{对话框}；

@Component({
    selector: 'alm-dialog-panel',
    templateUrl: './dialog-panel.component.html',
    styleUrls: ['./dialog-panel.component.scss'],
})
export class DialogPanelComponent implements OnInit {
    @Input() showCloseButton = true;
    @Input() dialog: Dialog<any>;
    @HostBinding('class.large-x-large') largeXlarge: boolean = false;
    @HostBinding('class.medium') medium: boolean = false;
    @HostBinding('class.rectangle') rectangle: boolean = false;
    constructor() {
    }

    ngOnInit() {
        if (!this.dialog) {
            throw new Error('Attribute \'dialog\' is required');
        }
        if (this.dialog.config) {
            this.largeXlarge = this.dialog.config.size === 'large-x-large';
            this.medium = this.dialog.config.size === 'medium';
            this.rectangle = this.dialog.config.size === 'rectangle';
        }
    }

    public onClose(): void {
        this.dialog.close();
    }

}

对话：

export const APP_DIALOG_DATA = new InjectionToken<any>('AppDialogData');

export class Dialog<T, D = any, R = any> {
    private overlayRef;
    private contentRef;
    private readonly _afterClosed = new Subject<R | undefined>();

    constructor(
        componentType: ComponentType<T>,
        private overlay: Overlay,
        private injector: Injector,
        public  config: DialogConfig<D>,
    ) {
        const positionStrategy = this.overlay.position().global()
            .centerHorizontally().centerVertically();

        const overlayConfig = new OverlayConfig({
            scrollStrategy: this.overlay.scrollStrategies.block(),
            hasBackdrop: config.hasBackdrop,
            positionStrategy,
        });

        this.overlayRef = this.overlay.create(overlayConfig);
        const portal: ComponentPortal<any> = new ComponentPortal(componentType, null, this.createInjector(config.data));
        this.contentRef = this.overlayRef.attach(portal);
    }

    private createInjector(data: any = ''): PortalInjector {
        const injectionTokens = new WeakMap();

        injectionTokens.set(Dialog, this);
        injectionTokens.set(APP_DIALOG_DATA, data);

        return new PortalInjector(this.injector, injectionTokens);
    }

    close(result?: R) {
        this.overlayRef.dispose();
        this._afterClosed.next(result);
        this._afterClosed.complete();
    }

    public get instance(): ComponentType<T> {
        return this.contentRef.instance;
    }

    public get afterClosed(): Observable<R | undefined> {
        return this._afterClosed.asObservable();
    }

}

风格类：

@import 'variables';

$alm-modal-container-bg: white;
$alm-modal-container-color: $alm-color-secondary;
$alm-modal-container-border-top-color: $alm-color-bright-blue;

$alm-modal-color-success: $alm-color-green;
$alm-modal-color-info: $alm-color-bright-blue;
$alm-modal-color-warning: $alm-color-amber;
$alm-modal-color-error: $alm-color-red;

:host {
    display: flex;
    flex-direction: column;
    position: relative;
    background: $alm-modal-container-bg;
    color: $alm-modal-container-color;
    border-top: 4px solid $alm-modal-container-border-top-color;
    max-height: 100%;
    height: auto;
    overflow-y: hidden;


    &.large-x-large {
        width: 98vw;
        height: 95vh;
    }

    &.medium {
        width: 500px;
    }

    &.rectangle {
        height: 85vh;
        width: 900px;
    }

    &.success{
        border-color: $alm-modal-color-success;
    }

    &.error{
        border-color: $alm-modal-color-error;
    }

    &.warning{
        border-color: $alm-modal-color-warning;
    }

    &.info{
        border-color: $alm-modal-color-info;
    }

}
   
.dialog-panel__footer:empty {
    display: none;
}

标签： javascripthtmlcssangular

javascript - 如何在Angular的textarea中只允许ASCII字符

问题描述

解决方案

推荐阅读