在前端开发中，我们通常需要处理用户的输入数据。有时候，我们希望通过某种方式来控制用户输入的格式或者行为，比如当用户按下"Shift + Enter"键时，在文本框中生成一个新的行。这篇文章将介绍如何检测“Shift+Enter”并在文本框中生成一个新的行。
1. 监听键盘事件
要实现这个功能，我们需要先在文本框元素上添加一个键盘事件监听器，用于捕获用户按下的键盘事件。可以使用 JavaScript 来实现这个功能：
<textarea id="myTextarea"></textarea>
const myTextarea = document.getElementById('myTextarea');
myTextarea.addEventListener('keydown', (event) => {
if (event.shiftKey && event.keyCode === 13) {
// 处理 Shift+Enter 操作
}
});在这个示例代码中，我们首先获取了一个 id 为 "myTextarea" 的文本框元素。然后，我们使用 addEventListener 方法来为这个元素添加一个 keydown 事件监听器。当用户按下键盘时，浏览器会触发这个事件，并将一个 event 对象作为参数传递给我们的回调函数。我们可以使用 shiftKey 和 keyCode 属性来检测用户是否同时按下了 Shift 键和 Enter 键。
2. 处理 Shift+Enter 操作
如果用户按下了 Shift+Enter 键，我们就需要在文本框中生成一个新的行。可以使用 JavaScript 来实现这个操作：
-- -------------------- ---- -------
----- ---------- - --------------------------------------
-------------------------------------- ------- -- -
-- --------------- -- ------------- --- --- -
----- ------- - -----------------
----- -------------- - --------------------------
----- ------------ - ------------------------
----- ------- - ----------------------- ------------------------------------------------------
---------------- - --------
------------------------- - ----------------------- - -------------- - --
-----------------------
-
---在这个示例代码中，我们首先获取了当前文本框的值、光标选区的起始位置和结束位置。然后，我们使用字符串拼接的方式，将原始文本框的内容分为两部分：光标前面的文本和光标后面的文本。我们在这两段文本之间插入一个换行符 "\n"，从而生成一个新的行。
最后，我们将新的文本重新赋值给文本框，并将光标移动到新的行的第一个字符处。需要注意的是，我们还需要调用 preventDefault 方法来阻止浏览器默认的 Enter 操作，从而避免生成一个额外的空白行。
3. 总结
通过以上的步骤，我们就可以检测“Shift+Enter”并在文本框中生成一个新的行了。这个功能可以帮助我们控制用户输入的格式和行为，提高文本框的易用性和可读性。
完整的示例代码如下：
-- -------------------- ---- -------
--------- ---------------------------
--------
----- ---------- - --------------------------------------
-------------------------------------- ------- -- -
-- --------------- -- ------------- --- --- -
----- ------- - -----------------
----- -------------- - --------------------------
----- ------------ - ------------------------
----- ------- - ----------------------- ------------------------------------------------------
---------------- - --------
------------------------- - ----------------------- - -------------- - --
-----------------------
-
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10606
