防止从 DevExtreme js 数据网格退出编辑模式答案

【问题标题】：Prevent quiting edit mode from DevExtreme js datagrid防止从 DevExtreme js 数据网格退出编辑模式
【发布时间】：2017-06-21 08:45:35
【问题描述】：

对于数据网格，我使用了 DevExtreme 数据网格，内容文本放在 textarea 上，例如：

$("#test").dxDataGrid( {
  columns: [
    {
       ...
       customizeText: function(cellInfo) {
         return cellInfo.value.replace(/(?:\r\n|\r|\n)/g, "<br/>");
       },
       editCellTemplate: function(cellElement, cellInfo) {
                  var $input;
                  var numberOfCariage = cellInfo.value.split('\n').length;

                  // if is textarea (by seeing if contains cariage return
                  if (/(?:\r\n|\r|\n)/g.test(cellInfo.value)) {
                     $input = $('<textarea rows="' + numberOfCariage + '" class="dx-texteditor-input" />');
                  } else {
                     $input = $('<input autocomplete="off" class="dx-texteditor-input" spellcheck="false" tabindex="0" name="" role="textbox" style="text-align: left;" type="text" />');
                  }

                  $input.val(cellInfo.value);
                  $(cellElement).append($input);
                  cellInfo.setValue(function () {
                     return $input.val();
                  });
       }
    }
  ],

  editing: {
        mode: "row",
        allowUpdating: true
  }
});

问题是，如果我编辑一个 textarea 单元格，如果我按 ENTER 在该 textarea 中添加新行，我就会退出编辑模式。

如何预防？

【问题讨论】：

标签： javascript c# devextreme

【解决方案1】：

stopPropagation 方法将对您的情况有所帮助。

只需为您的 textarea 添加 keydown 事件处理程序：

$input.on('keydown', function(e) {
    // Check if pressed key is 'Enter'
    if(e.keyCode === 13) {
        e.stopPropagation();
    }
});

要查看实际结果，请尝试编辑此demo 中的“位置”。

【讨论】：

是的，我也支持这个解决方案 :)