Textarea 忽略输入但需要触发保存按钮

Question

有点棘手的情况。对于下面的代码，我添加了 (keydown.enter)="false" 以忽略 textarea 中的换行/输入按钮

这会导致用户出现问题，并且希望现有的行为按下回车会自动触发“保存按钮”

知道如何在仍聚焦于 textArea 但忽略断线时触发保存按钮吗？

    <textarea #textArea
    style="overflow:hidden; height:auto; resize:none;"
    rows="1"
    class="form-control"
    [attr.placeholder]="placeholder"
    [attr.maxlength]="maxlength"
    [attr.autofocus]="autofocus"
    [name]="name"
    [attr.readonly]="readonly ? true : null"
    [attr.required]="required ? true : null"
    (input)="onUpdated($event)"
    [tabindex]="skipTab ? -1 : ''"
    (keydown.enter)="false"
    [(ngModel)]="value">
    </textarea >

Answer 1

@Pengyy 扩展答案

您可以将绑定回车键绑定到一个伪保存函数，并在其中阻止默认，从而阻止保存函数和换行符。然后你可以从那里调用 save 函数（假设它是可访问的，例如服务），或者你可以发出一个 EventEmitter，并让该发出被捕获以触发 Save 函数。

Answer 2

您可以将Save按钮的相同功能绑定到texterea的keydown.enter，并调用$event.preventDefault避免换行。

样本plunker。

Answer 3

假设您的 textarea 在 form 元素内。

{Plunker Demo}

您可以通过使用隐藏提交输入来实现它，像这样

@Component({
  selector: 'my-app',
  template: `
    <form (submit)="formSubmitted($event)">
      <input #proxySubmitBtn type="submit" [hidden]="true"/>

      <textarea #textArea (keydown.enter)="$event.preventDefault(); proxySubmitBtn.click()">
    </textarea>
    </form>
  `,
})
export class App {
  formSubmitted(e) {
    e.preventDefault();
    alert('Form is submitted!');
  }
}

Answer 4

您可以创建一个服务，该服务可以向将处理该命令的其他组件发送通知。该服务可能如下所示：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable()
export class DataSavingService {

    private dataSavingRequested = new Subject<void>();
    public dataSavingRequested$ = this.dataSavingRequested.asObservable();

    public requestDataSaving(): void {
        this.dataSavingRequested.next();
    }
}

...并且应该在模块的providers 部分中注册。注意：如果必须在通知中传递数据，您可以为dataSavingRequested Subject 声明一个非空参数类型（例如string）。

服务将被注入到带有 textarea 元素的组件中，并在 Enter 按键事件的处理程序中调用：

import { DataSavingService } from "./services/data-saving.service";
...

@Component({
    template: `
        <textarea (keypress.enter)="handleEnterKeyPress($event)" ...></textarea>
    `
})
export class ComponentWithTextarea {
    constructor(private dataSavingService: DataSavingService, ...) {
        ...
    }

    public handleEnterKeyPress(event: KeyboardEvent): void {
        event.preventDefault(); // Prevent the insertion of a new line
        this.dataSavingService.requestDataSaving();
    }
    ...
}

带有保存按钮的组件将订阅服务的dataSavingRequested$通知，并在收到通知时保存数据：

import { Component, OnDestroy, ... } from "@angular/core";
import { Subscription } from "rxjs/Subscription";
import { DataSavingService } from "../services/data-saving.service";
...

@Component({
    ...
})
export class ComponentWithSaveButton implements OnDestroy {

    private subscription: Subscription;

    constructor(private dataSavingService: DataSavingService, ...) {
        this.subscription = this.dataSavingService.dataSavingRequested$.subscribe(() => {
            this.saveData();
        });
    }

    public ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

    private saveData(): void {
        // Perform data saving here
        // Note: this method should also be called by the Save button
        ...
    }
}

---

上面的代码假定必须在组件中使用保存按钮执行保存。另一种方法是将该逻辑移动到服务中，这将公开一个可由组件调用的saveData 方法。但是，该服务需要收集数据以保存。它可以通过 Subject/Observable 机制获得，也可以直接由组件作为参数提供给saveData 或通过调用服务的其他方法。

Answer 5

可能有两种解决方案：

1. 使用javascript处理输入事件并触发其中的保存功能

或

1. 在 Angular 端使用与 this 中描述的相同的东西。

This 也可以帮到你