textarea 用の Undo/Redo を作った

2021/08/21に公開2

textarea に対して、テキスト入力を取り消したり、やっぱり取り消すのを止めたりする機能を作りました (作ったもの)。

動機

textarea の value を書き換えた際の変更は標準の Undo/Redo の対象になりません。
既存の解決方法として Document.execCommand() がありますが、この機能は廃止されたとのことなので代替手段が欲しくなりました。

実装

標準の Undo/Redo を無効化した上で、変更内容を配列に出し入れしています。

https://github.com/shikatan0/textarea-undo-redo

対応機能

  • 日本語入力 (IME)
  • 切り取り&貼り付け
  • ドラッグ&ドロップ

最後に

個人的には動くものが出来て満足しているのですが、標準機能の挙動の調査や動作確認がかなり甘いです。もしも参考にする場合は動作が保証されているものでは無いことを留意してください。
また、不具合や実装もれがあった場合は教えてもらえると助かります。

end

GitHubで編集を提案

Discussion

catnosecatnose

いいですね!
Macだとショートカットにctrlよりもcommandキー()を使うので、commandにも対応されていると嬉しいなーと思いました。
https://hacknote.jp/archives/7321/

shikatanshikatan

ありがとうございます!
ショートカットキー関連の処理をユーザーエージェントに応じて変更するようにしました。