新闻资讯

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻资讯列表

如何把textarea中光标所在的行删掉,将textarea的内容保存

发布时间:2023-12-27 01:45:59

如何把textarea中光标所在的行删掉

要删除textarea中光标所在的行,可以依照以下步骤进行:

  1. 获得textarea中文本内容。
  2. 获得光标的位置。
  3. 使用正则表达式将光标所在行的内容删除。
  4. 将更新后的文本内容重新设置到textarea中。

下面是一个示例代码,演示怎样实现这个功能:

<!DOCTYPE html>
<html>

<body>
  <textarea id="myTextarea" rows="4" cols="50"></textarea>
  <button onclick="deleteCurrentLine()">删除当前行</button>

  <script>
    function deleteCurrentLine() {
      // 获得textarea元素
      var textarea = document.getElementById("myTextarea");

      // 获得文本内容
      var content = textarea.value;

      // 获得光标的位置(起始和结束位置)
      var startPos = textarea.selectionStart;
      var endPos = textarea.selectionEnd;

      // 根据光标位置找到光标所在行的起始和结束位置
      var startLinePos = content.lastIndexOf("
", startPos - 1) + 1;
      var endLinePos = content.indexOf("
", endPos);

      // 删除光标所在行的内容
      var updatedContent = content.slice(0, startLinePos) + content.slice(endLinePos);

      // 更新textarea中的文本内容
      textarea.value = updatedContent;
    }
  </script>
</body>

</html>

在上述示例中,我们首先获得textarea元素和其中的文本内容。然后,我们使用selectionStartselectionEnd属性获得光标的起始和结束位置。接下来,使用lastIndexOfindexOf方法找到光标所在行的起始和结束位置。最后,我们使用slice方法删除光标所在行的内容,并将更新后的文本内容重新设置到textarea中。

请注意,这个示例只能删除光标所在的行,如果光标选中了多行文本,则只会删除第一行。如果你希望能够处理多行删除,请修改代码以适应你的需求。