在文本区域中的当前位置之后插入新行

Question

我有一个textarea，里面有几行：

购买杂货：

1. 番茄
2. 洋葱
3. 3根胡萝卜
4. 青菜

我决定在洋葱后添加新行，该怎么做？ 我想在那之后单击，并用ctrl添加新行+输入组合。

我当前的代码在textarea的末尾添加了新行：

textaAreaField.addEventListener('keypress', function(e) {
    if(e.ctrlKey) {     
      this.value += "\n";
    }
});

没有jQuery pls

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，请使用以下解决方案：

 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; } }); 

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

Answer 3

不要失败UX。 让您的用户使用默认的SHIFT + ENTER
使用ENTER发送聊天帖子-是常见的“功能”。 希望/需要创建换行符的用户（在这种情况下）可以使用SHIFT + ENTER创建换行符。 那是一个很好的déjàvu UX。

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

 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>