Redmineのテキスト編集をIE上で行う際Escキーで編集内容が消える問題の対処 - torutkのブログ

はじめに

自宅PCや開発PCでは、Webブラウザとして主にFirefoxを使い、たまにChromeを、稀にEdgeを使います。先月初めに、職場が移って（現職出向から帰任）新しいPCが配布されました。業務システムの対応Webブラウザの関係か、デフォルトがIE 11となっています。IE 11でRedmineのチケットを編集していたところ、漢字変換のON/OFF操作の際に誤ってEscキーを押してしまい、なんとそれまで入力していたテキストが消失してしまいました。

IEのメニューには「元に戻す」的なメニュー項目は存在せず、ググって見つけた元に戻す操作のショートカットキーCtrl-Zでも何故か戻らず、再度入力し直す事態となりました。

IE上でHTMLのFormでテキスト編集をする際にEscキーを押すとそれまで入力した内容が消えるというのは、IEの仕様のようです。しかし、FirefoxやChrome、Edgeにはその仕様はありません。

Redmineを使う際、職場では多くの人がIEを使うので、このEsc問題への対処をしたいところです。周囲に聞くと、Escの誤操作で消えるから、エディターでテキストを作成してからコピーするといった対処をしている人もいました。

IEでEscキーによるテキスト消失を避ける手段を調べてみた

調べてみると、対処の手段はHTMLページにJavaScriptでEscキー入力があるとそれを無視する処理を埋め込むというものでした。その実装の多くは、documentのkeydownイベントでキーコードがEscキーの27であればイベントをつぶすというものでした。

Redmineではどう対処するか

Redmineで各ページにJavaScriptを埋め込むぅ？　Redmineの内部をいじるのか？と思いましたが、ふとView Customizeプラグインがこの対処に使えそうと思い当たりました。

View Customizeでこの件と似たような処理で、チケットの作成途中にEnterキーが押されるとチケットが登録されてしまうという問題に対処するため、特定の条件でEnterキーを無視するという例を紹介しているブログがありました。

qiita.com

この記事では、次のコードでEnterキーを抑制していました。

$(function(){

    // form内のエンターキー入力を無視
    // トラッカー・ステータス操作時のDOM操作で破棄されないようdocumentにイベントを設定
    $(document).on('keypress', '#issue-form input[type="text"]', function(event) {
        if(event.keyCode == 13) {
            return false;
        }
    })
});

これを真似て、テキスト編集箇所でキー入力があった際、Escキーであれば無視するコードを作成します。 Redmineでは、Wiki機能を持つテキスト編集領域は、HTMLのTextArea要素にclass属性で .wiki-editが指定されています。そこで、次の様に記述しView Customizeに登録しました。なお、パスは .* を指定します。

/*
 テキスト編集中にEscキーを無効にする
（IEでテキスト編集中にEscキーを押すと入力したテキストが消える問題の対処）
*/
$(function() { 
  $(document).on('keydown', '.wiki-edit', function(event) {
    if (event.keyCode == 27) {
      return false;
    }
  });
});

結果

IEでRedmineのテキスト編集箇所を開いてテキスト編集し、Escキーを押したところ、編集途中のテキストが消えることなく存在し続けました。