Angular TextArea 行为绑定到 Ctrl-Enter 键答案

【问题标题】：Angular TextArea behavior bind to Ctrl-Enter KeyAngular TextArea 行为绑定到 Ctrl-Enter 键
【发布时间】：2019-04-05 19:33:18
【问题描述】：

我一直在尝试实现自定义<textarea> 行为，其中enter 事件将触发一个函数，ctrl+enter 将触发<textarea> 上的换行符。

我一直在尝试通读此处的现有问题，但其中大多数都在使用 plunker，而且奇怪的是我无法正确加载它们。

我已经设法让enter 键提交一些东西，而不是做下一行。但是，当我执行ctrl-enter keydown 事件时，我似乎无法让 textarea 转到下一行。

有关示例，请参阅此blitzstack。

【问题讨论】：

标签： html angular bootstrap-4 ng-bootstrap

【解决方案1】：

我能够让它工作。希望这将为您提供一个起点。 :)

将 triggerFunction 更新为

 triggerFunction(event) {
        console.log(event);
        if (event.ctrlKey && event.key === 'Enter') {
          /*
            cannot make textarea produce a next line.
          */
          var text = document.getElementById("textarea1");
          text.value += '\n';
          console.log(text);
        //  text = text.

          console.log("next line!");
        } else if (event.key === 'Enter') {
          event.preventDefault();
          console.log("submit!");
        }
      }

把html改成

<div class="form-group">
    <label for="textarea1">Example textarea</label>
    <textarea 
      class="form-control"
      id="textarea1" 
      placeholder="Press Ctrl-Enter to do Next Line, otherwise Enter to Send"

      (keydown)="triggerFunction($event)"></textarea>
  </div>

【讨论】：

啊，我明白了，但要确认一件事，当我将 textarea 的值传递给后端时，textarea 中的\n 是否真的存在？通过 JSON 或任何其他媒体。我会尝试另一种方法而不是使用document 对象，也许我会使用该模型。我认为这样更清洁和统一遵循角度约定
是的，你应该做一个清晰的版本。我只是想让你朝着正确的方向前进:)

【解决方案2】：

这更容易

(keydown.control.enter)="onCtrlEnter()"

【讨论】：