时间戳

首页 > 解决方案 > Angular TextArea 行为绑定到 Ctrl-Enter 键

html - Angular TextArea 行为绑定到 Ctrl-Enter 键

问题描述

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

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

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

有关示例，请参阅此blitzstack。

标签： htmlangularbootstrap-4ng-bootstrap

解决方案

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

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

推荐阅读