Html not（：focus）：单击某些占位符文本后，将焦点放在可编辑div上

我想在属性映射上插入可编辑的div和占位符文本，但遇到了一些问题<代码>内容：attr（数据文本）如果您查看示例，可以在任何位置单击第一行，并且可以立即写入。对于其他文本，只有在不单击占位符文本的情况下，才能进行文本写入。单击占位符文本可能会起作用，但大多数情况下，在用户再次单击之前，占位符文本不会获得焦点

我对此进行了分析，发现css中的

not（：focus）

是问题的根源。我认为这正是这种交互的原因，但似乎dom操纵才是罪魁祸首。省略它将在div上保留占位符，但单击会起作用<代码>用户选择：无似乎对此没有任何影响

如何防止div元素在使用

not（：focus）

时立即失去单击焦点

[contentEditable=true]：空：不（：焦点）：在{
内容：attr（数据文本）；
光标：文本；
颜色：红色；
}
.编辑{
边框：2个点黑色；
背景色：#CCC；
最小宽度：100px；
填充：10px；
利润率：10px；
}

工作模式

指针事件：无似乎解决了这个奇怪的问题。可能是因为它阻止了伪元素捕获click事件，从而使textarea失去焦点


[contentEditable=true]：空：不（：焦点）：在{
内容：attr（数据文本）；
光标：文本；
颜色：红色；
指针事件：无；
}
.编辑{
边框：2个点黑色；
背景色：#CCC；
最小宽度：100px；
填充：10px；
利润率：10px；
}
工作模式
太好了，这正是我需要的。有时候答案很简单。。完全有道理。谢谢