Question

我有表单，我想用转义键关闭我的表单。我无法弄清楚如何实现它。我知道我需要一些keyDown事件！但是在哪里实施以及如何使其触发？

<form id = 'myform' {{action 'save' on='submit'}}>
<div class="usersgroups-headline-label admin-form-headline-label">
  {{#if page.isEdit}}Edit{{else}}Add{{/if}}{{#if page.holder.isUser}} User{{#if page.isEdit}} : {{page.oldHolder.Id}}{{#if showHolderName}} ({{page.oldHolder.Name}}){{/if}}{{/if}}{{/if}}{{#if page.holder.isGroup}} Group{{#if page.isEdit}} : {{page.oldHolder.Id}}{{/if}}{{/if}}
</div>
.
.
.
.

<div class="action-buttons">
  {{#if page.isEdit}}
    {{form-button value='Save' enabled=page.canUpdate type='submit'}}
  {{else}}
    {{form-button value='Add' enabled=page.canSave type='submit'}}
  {{/if}}
  {{form-button value='Cancel' action='cancel'}}
</div>

Answer 1

我建议使用像ember-keyboard这样的插件来抽象你描述的行为。我还建议你看一下ember-modal-dialog，虽然不是你乍看之下可能会提供类似的行为，但也解释了如何在他们自己的自述文件中实现键盘事件。

如果您想手动处理，如果表单不在组件中，您应该将表单包装在处理键盘事件的组件中。

在表单中，您必须使用didInsertElement方法开始侦听事件，并使用willDestroyElement方法在组件被拆除时停止侦听。

在目前的Ember（~2.18）中，这看起来像这样：

import Component from '@ember/component';

export default Component.create({
    onEscapeKey: () => {},

    didInsertElement() {
        this._escapeKeyCallback = (event) => {
            if (event.key === 'Escape') {
                this.onEscapeKey();
            }
        };

        window.addEventListener('keypress', this._escapeKeyCallback);
    },

    willDestroyElement() {
        window.removeEventListener('keypress', this._escapeKeyCallback);
    },
});

然后，您可以在模板中使用此组件，并使用onEscapeKey属性在按下转义键时触发操作。

{{escape-key-component onEscapeKey=(action 'doSomething')}}

Ember：使用＆＃39; Esacpe＆＃39;关闭/取消表单键

1 个答案: