防止在#textarea div之外插入

Question

我有一个id =“textarea”的contenteditable div我还有一些按钮在光标位置插入不同的文本/符号。当我点击textarea div（按钮内部的文字）时，会出现问题;文本/符号被插入div之外。我怎么能阻止这个？我可以“强制关注”那个div吗？我只有一个textarea，虽然我将来可能会有更多。

对于插入，我在另一个帖子中使用了Tim Down建议的代码：

Insert html at caret in a contenteditable div

这是我的textarea和按钮的代码。

<div id="textarea" contenteditable="true">
    <style scoped>
        #example-one { margin-bottom: 10px; }
        [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
        [contenteditable="true"]:hover { outline: 3px dashed #0090D2; }
    </style>
    <p id="inside">
    </p>
</div>

<div id="buttons">
    <button type="button" onclick="pasteProjectionAtCaret()">Π</button>
</div>

Answer 1

document.getElementById('textarea').onblur=function(){
    document.getElementById('textarea').focus();
};

这使得只要textarea失去焦点，Javascript就会立即设置焦点，从而不允许用户离开。