Question

我有一个textarea里面有几行：

购买杂货：


番茄

洋葱

3胡萝卜

绿色

我决定在洋葱后添加一个新行我该怎么办？我想在此之后单击并使用ctrl + enter组合添加一个新行。

我当前的代码在textarea的最末端添加了一个新行：

close

没有jQuery请

Answer 1

这是一个现场演示，展示SHIFT + ENTER开箱即用：没有恶作剧。

<label>Use <code>SHIFT</code> + <code>ENTER</code> to insert a line break: <br>
<textarea>
1. A
2. B
3. C
</textarea>
</label>

Answer 2

如果你想在这里使用CTRL + ENTER，那就是一个解决方案：

＆＃13;

var textAreaField = document.getElementById('tb');
textAreaField.addEventListener('keydown', function(e) {
    if(e.ctrlKey && e.keyCode == 13) {
      var position = this.selectionEnd;
      this.value = this.value.substring(0, position) + '\n' + this.value.substring(position);
      this.selectionEnd = position;
    }
});

＆＃13;

<textarea id="tb"></textarea>

＆＃13;

Answer 3

不要失败。让您的用户使用默认的SHIFT + ENTER
使用ENTER（即）发送聊天帖 - 是一种常见的“功能”。想要/需要创建他们已经知道的新行（在这种情况下）的用户可以使用SHIFT + ENTER来创建换行符。 这是一个很好的déjàvu用户体验。

因此，不是创建其他功能，而是改善模糊文本区域的功能：

var textaAreaField = document.getElementById("textaAreaField");

textaAreaField.addEventListener('keydown', function(e) {
  // Blur only if ENTER was not used in combo with SHIFT
  if (e.keyCode === 13 && !e.shiftKey) {
     this.blur();
  }
});

textarea{font:14px/1.4 sans-serif; width:100%; padding: 8px; box-sizing: border-box;min-height: 160px;}

ENTER = blur textarea<br>
ENTER + SHIFT = create newline

<textarea id="textaAreaField">
tomato
Onion
3 carrots
greens</textarea>

在textarea中的当前位置之后插入一个新行

3 个答案: