utamaro’s blog

誰かの役に立つ情報を発信するブログ

textarea内でtabを使えるようにするためのまとめ

textareaでtabを使えるようにするために参考にしたサイト

Qiitaの記事なのですが、うまく動かなかったと思います。

https://qiita.com/laineus/items/12a220d2ab086931232d

tabを押すと、文字の前にTAB_STRが挿入されます。

自分が望んでいたのは、tabを押すと、tabが挿入されるものです。

demo画面を参考にして、少し書き直してみました。

もう少しきれいに書ける気がしますが、時間と気力が続かなくてかけませんでした。

let textareaTab = {};
(function() {
    textareaTab.setEvent = function() {
        console.log("set textarea tab event.");
        var textareas = document.querySelectorAll('textarea');
        for (var ti = 0; ti < textareas.length; ti++) {
            textareas[ti].addEventListener('keydown', function(e) {
                if (e.keyCode === 9) {
                    e.preventDefault();
                    var isShift = e.shiftKey;
                    var elm = e.target;
                    var txt = elm.value;
                    var slct = {
                        left: elm.selectionStart,
                        right: elm.selectionEnd,
                    };
                    if (slct.left == slct.right && !isShift) {
                        elm.value = txt.substr(0, slct.left) + '\t' + txt.substr(slct.left, txt.length);
                        slct.left++;
                        slct.right++;
                    } else {
                        var lineStart = txt.substr(0, slct.left).split('\n').length - 1;
                        var lineEnd = txt.substr(0, slct.right).split('\n').length - 1;
                        var lines = txt.split('\n');
                        for (var i = lineStart; i <= lineEnd; i++) {
                            if (!isShift) {
                                lines[i] = '\t' + lines[i];
                                if (i == lineStart) {
                                    slct.left++;
                                }
                                slct.right++;
                            } else if (lines[i].substr(0, 1) == '\t') {
                                lines[i] = lines[i].substr(1);
                                if(i == lineStart) {
                                    slct.left--;
                                }
                                slct.right--;
                            }
                        }
                        elm.value = lines.join('\n');
                    }
                    elm.setSelectionRange(slct.left, slct.right);
                    return false;
                }
            })
        }
    }
})();

export default textareaTab;

exportしているので、別のjsからimportできます。

↓のように使います。

import textareaTab from './textarea_tab.js';