javascript - 我如何在父 div 中设置光标，将 contenteditable 设置为 true 但我有

Question

如何在可内容编辑的 div 中设置插入符号光标，但子项不可内容编辑。我有这段代码，每当我单击 div 时，光标就会转到子 div

请帮忙

var container = document.createElement('P');
                    container.id = 'Cakdlsfj';
                    container.className ='dragClass7 ';
                    container.style.zIndex = 500;
                    container.setAttribute('style','width:150px;height:20px; overflow:hidden ');
                    container.contentEditable = true;
                    container.style.position = 'absolute';
                    container.style.left = x+'px';
                    container.style.top = y+'px';
                    container.focus();
                    var div1 = document.createElement('DIV');
                    div1.setAttribute('style','background-color:gray; opacity:0.8; ');
                    **div1.contentEditable = false;**
                    div1.style.position = 'absolute';
                    div1.style.right = '20px';
                    div1.style.bottom = '0px';
                    div1.innerHTML = "A-            A+";
                    **container.appendChild(div1);
                    document.body.appendChild(container);**

                    div1.addEventListener('mouseover',function(){

                        div1.style.cursor = "pointer";
                    });

                    $('.dragClass7').draggable();
                    $('.dragClass7').resizable({autoHide:true});

检查粗体行...但我默认将光标设置在子 div 上。 即使它不可编辑

Answer 1

尚不完全清楚您是否在此处使用 jQuery，但使用 native javascript focus 方法应将插入符号设置为 contentEditable 元素，如下所示:

var element = document.getElementById('Cakdlsfj');

element.focus();

应该提到的是，您应该在将元素添加到 DOM 之后执行此操作。