Angular TextArea行为绑定到Ctrl-Enter键

时间:2018-11-01 14:44:51

标签: html angular bootstrap-4 ng-bootstrap

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

我一直在尝试通读现有的问题,但是大多数问题都使用了插件,奇怪的是我无法正确加载它们。

我设法使enter键提交了一些内容,而不是下一行。但是,当我进行ctrl-enter键按下事件时,我似乎无法使textarea转到下一行。

有关示例,请参见此blitzstack

1 个答案:

答案 0 :(得分: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>