textarea内のカーソルがある行を削除する方法は？

2年 ago
海斗, 葵
1 minute

textarea内のカーソルがある行を削除するには、次の手順に従うことができます：

  1. テキストエリアの内容を取得します。
  2. カーソルの位置を取得します。
  3. 光カーソルがある行の内容を削除します。
  4. テキストの更新後、その内容を再びテキストエリアに設定します。

以下は、この機能を実装する方法を示すサンプルコードです。

<!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("\n", startPos - 1) + 1;
      var endLinePos = content.indexOf("\n", endPos);

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

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

</html>

上記の例では、まずtextarea要素とそのテキスト内容を取得します。 次に、selectionStartとselectionEndプロパティを使用して、カーソルの開始位置と終了位置を取得します。 その後、lastIndexOfやindexOfメソッドを使用して、カーソルがある行の開始位置と終了位置を見つけます。 最後に、sliceメソッドを使用してカーソルがある行の内容を削除し、更新されたテキスト内容をtextareaに再設定します。

この例では、注意してください。カーソルがある行のみを削除できます。複数行のテキストが選択されている場合、最初の行のみが削除されます。複数行の削除をしたい場合は、コードを変更して要件に合わせてください。

bannerAds