CISTポータルの振り返りの文字数制限を超えても入力できるようにする

CISTポータルの振り返り

文字数制限を超過しても入力できるようにしてほしい

600文字を超えたら、「600文字」の部分を赤字で表示する

Twitterでは600文字を超えている部分文字列にマーカーが引かれる

送信ボタンを一時的にdisabledにする

HTMLのmaxlength属性で実装されているので、これを直せば良さそう

以下のように書けば良いだろうか？

code:remove_maxlength.js

const textareas = document.querySelectorAll("textarea");

const getLengthAsCRLF = (text) => {

const newlineCount = ...text.matchAll("\n").length;

const lengthAsCRLF = text.length + newlineCount;

return lengthAsCRLF;

}

textareas.forEach(textarea => {

const maxLength = textarea.maxLength;

const currentLengthBox = textarea.parentElement.querySelector("span:nth-of-type(1)");

/* Replace limitation logic of textarea length */

textarea.removeAttribute("maxlength");

textarea.addEventListener("change", e => {

const inputValue = e.target.value;

const lengthAsCRLF = getLengthAsCRLF(inputValue);

const isOverLength = lengthAsCRLF > maxLength

const validity = isOverLength ? この振り返りには、${inputValue}文字以下のメッセージのみ送信できます。 : "";

textarea.setCustomValidity(validity);

currentLengthBox.textContent = lengthAsCRLF;

});

code:helper_lecture.js

const getSubmenuTitle = () => {

return document.querySelector(".submenuttl")?.textContent ?? null

}

const isLecurePage = () => {

const title = getSubmenuTitle();

return title == "授業";

}

おおむねできたt6o_o6t.icon

現在文字数の誤った実装を無効化しなければ不可解な動作になる

change時ではなくkeydown時に処理することで回避できた

なぜcontent scriptが必ず後に実行されるのかは分からない

バックエンドにて、先頭と末尾の空白 / 改行が削除される仕様があったt6o_o6t.icon

Chrome DevToolsで確認したところ、空白自体はform dataに含まれている

バックエンドに保存する際に切り捨てられているものと考えられる

フロントエンドの文字数カウントも、事前にtrim()してから実行する必要がある

プログラミング言語間の文字列トリム処理の挙動差があると厄介になる

文字数制限を越えているときに送信をさせないのは難しい？t6o_o6t.icon

PortalのデフォルトのEventListenerに先回りして、ExtensionのEventListenerを登録できたと仮定した場合

stopImmediatePropagation()で他イベントリスナを実行させないという方法が考えられる

この仮定を実現するのは難しい？

Chrome ExtensionのMAIN worldで実行した場合、イベントリスナの空間が共有される

isolated worldで実行した場合は、互いのイベントリスナに干渉するのは難しい？

未検証

必須ではないため、考えないことにする

PortalExt