TextAreaのキャレットの位置で行番号を取得するコード

　TextAreaに行番号を付加するのは、折り返しでも行番号が追加されてしまうコードか、折り返しを禁止するコードしか、作ることができず、難しい。そこで、キャレットの位置で行番号が分かるようなコードを用意することにした。この場合、折り返して数行に見えてもそれは同じ行としてカウントされるので、テキストエディタで表示される行番号と同じになる。コードはGeminiに教わった。

<!DOCTYPE html>
<html>
<head>
    <title>TextArea キャレット行番号取得</title>
</head>
<body>
    <textarea id="inputText" rows="10" cols="50"></textarea>
    <div id="caretLineNumber">現在のキャレット行番号: 1</div>

    <script>
        const textarea = document.getElementById('inputText');
        const caretLineNumberDiv = document.getElementById('caretLineNumber');

        function updateCaretLineNumber() {
            const caretPosition = textarea.selectionStart;
            const textBeforeCaret = textarea.value.substring(0, caretPosition);
            const lineNumber = textBeforeCaret.split('\n').length;
            caretLineNumberDiv.textContent = `現在のキャレット行番号: ${lineNumber}`;
        }

        textarea.addEventListener('input', updateCaretLineNumber);
        textarea.addEventListener('mouseup', updateCaretLineNumber);
        textarea.addEventListener('keyup', updateCaretLineNumber);

        // 初期表示
        updateCaretLineNumber();
    </script>
</body>
</html>

コメント

コメントを投稿