aurelia可编辑列keydown

时间:2016-03-05 11:23:35

标签: javascript aurelia

我有一个表格,包含以下tbody规范:

<tbody class="ui-datatable-data ui-widget-content">
    <tr ref="rowElement" repeat.for="rowData of dataToRender" class="ui-widget-content ${$odd ? 'ui-datatable-odd':'ui-datatable-even'} ${(selectionMode && rowElement == hoveredRow) ? 'ui-state-hover':''}" mouseenter.trigger="hoveredRow = $event.target"  mouseleave.trigger="hoveredRow = null" click.trigger="onRowClick($event, rowData,$index)">
       <td repeat.for="col of columns" attr.style.bind="col.style" attr.class.bind="col.styleClass" class="${col.editable ? 'ui-editable-column':''}"  click.trigger="switchCellToEditMode($event.target)">
           <span class="ui-column-title" if.bind="responsive">${col.header}</span>
           <span class="ui-cell-data" click.trigger="switchCellToEditMode($event.target)">${rowData[col.field]}</span>
           <input type="text" class="ui-cell-editor ui-state-highlight" if.bind="col.editable" value.bind="rowData[col.field]" blur.trigger="switchCellToViewMode($event.target)" keydown.trigger="onCellEditorKeydown($event)" />
       </td>
     </tr>
</tbody>

keydown触发器:

onCellEditorKeydown(event) {
    if (this.editable) {
        if (event.keyCode == 13) {
            this.switchCellToViewMode(event.target);
        }
    }
}

但是keydown.trigger使输入无法写入。 通过移除触发器,它可以正常工作。

我在这里找不到什么东西?

br hw

1 个答案:

答案 0 :(得分:5)

从keydown事件处理程序返回true,以便不取消浏览器的默认行为。

以下是一个示例:https://gist.run?id=d9acea04776f6b20000c

<强> app.html

<template>
  <input keydown.trigger="handleKeydown($event)">
</template>

<强> app.js

export class App {

  handleKeydown(event) {
    // return true so the default behavior isn't canceled.
    return true;
  }

}