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

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

JavaScript

Alt+Enterで改行したい。

「IE11のテキストエリアでAlt+Enter で改行。」「Enter キーで次の項目(input要素)に移動(いわゆる、Tabキー)。」の操作をしたいという事を実現する必要があった。

IE11のショートカットキーでAlt+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できません。というのは「あってはならない」ことです。

PLに判断してもらうべきなので、設計レビューの時に少し実現方法について触れておいた方が良い。そんなの後にしろ。と言われたら、「摘録なり議事録、レビュー記録」にその旨を必ず記載しましょう。

後々、技術的課題で実現できない(工数をかければ対応できる。)となった場合は、その議事録を持ち出して、PMに直談判ですね。(以前、PLに対して提言したが、後工程に回したために状況が悪化した。そのシワ寄せを設計・PG担当に寄せるな!と。 大抵の場合、そのような言葉を飲み込んで、仕事をするのでしょうね)

スポンサーリンク