MENU

テキストエリアにカーソル位置で文字を挿入する

やりたいこと

テキストエリアにカーソル位置で文字を挿入する

実装に関しては参考記事とてもわかり易いので参考にしてください

ポイント

下記の2つのメソッドの使い方を理解する必要がある - selectionStartメソッド - substrメソッド

selectionStartメソッド

選択した要素の開始位置を教えてくれるらしい

syncer.jp

substrメソッド

指定した位置で文字を切り出してくれる

const str = 'Mozilla';

## 開始位置から終了位置を指定すると文字列を返却してくれる
console.log(str.substr(1, 2));
// expected output: "oz"

## 指定した位置以降の文字列を返却してくれる
console.log(str.substr(2));
// expected output: "zilla"

developer.mozilla.org

まとめ

selectionStartメソッドで、入力位置を取得して、 substrメソッドで、カーソルの開始位置を渡してあげれば、任意の場所で文字を分割できるので簡単に文字を挿入できる

参考記事

blog.ver001.com