JavaScript Alt+Enter キー制御でTEXTAREA改行したい

JavaScriptFirefox, Google Chrome, IE11, キー制御, 小技

JavaScript

Alt+Enterで改行したい。

「IE11のテキストエリアでAlt+Enter で改行。」

「Enter キーで次の項目(input要素)に移動。」

って、機能仕様が来た。

 

IE11のショートカットキーでAlt+Enterは全画面表示切替だけど、

Alt+Enterで実現できるかな?

 

ネットで調べると、 Alt+Enterを他のキー(例えば、Ctrl+Enter)に

置き換えたやり方は見つかりましたが、

Alt+Enterで実装したコードは見つかりませんでした。

 

なので、独自実装を試みて…。

結論として、

実現はできましたが、正攻法ではありません。

なので、性能とか遅いかもです。

動作確認ブラウザ:IE11、Firefox、Google Chrome

 

ソースコード

下準備:

「ta1」は、テキストエリアのID(HTML)を指定する。

下のコードをjsファイルに張り付ける。

/** Line feed code:CrLf */
var CRLF = "\r\n";
/**
 * window.onload
 */
window.onload = function() {
    // Set an event in the textarea
    document.getElementById("ta1").onkeydown = AltEnterCrLf;
};
/**
 * Line break with Alt-Enter
 * @param {Object} e event
 */
function AltEnterCrLf(e) {
    if (e.which == 13) {
        if (e.altKey) {
            var first = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);
            var second = e.currentTarget.value.substr(e.currentTarget.selectionEnd);
            e.currentTarget.value = first + CRLF + second;
            e.currentTarget.selectionStart = first.length + 1;
            e.currentTarget.selectionEnd = first.length + 1;
            return false;
        } else {
            return false;
        }
    }
}

最後に

お客様の求める機能仕様が技術的に実現できるかどうかは、

設計フェーズで判断しておくべきですが、

後手後手に回ってきて、

結果、PG担当者に押し付ける形に……。

 

今回は解決できましたが、

解決出来なかったらどうするんでしょうね。

仕様変更は、必ずしも「お客様都合」って訳じゃないのです。

デスマーチの布石は、小さな作業スルーから始まったりするのです。

スポンサーリンク