Angular TextArea 行为绑定到 Ctrl-Enter 键

Question

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

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

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

查看示例 blitzstack。

Answer 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>

Answer 2

这更容易

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

Angular TextArea 行为绑定到 Ctrl-Enter 键

Angular TextArea behavior bind to Ctrl-Enter Key

html

bootstrap-4

ng-bootstrap

angular