在Javascript中设置contentEditable元素的有限长度

我有一个html

和js代码：

const a = document.getElementById("a");
a.contentEditable = true;

我想把输入文本的最大长度设为30。我试过使用

a.addEventListener("input",() => {
        if(a.innerText.length == 30) {
            a.contentEditable = false;
    }

---

但结果并不令人满意。它确实停止了进一步的输入，但也阻止了我编辑a。

我通过添加

a.innerText = a.innerText.slice(0,30);