div 使用contenteditable编辑状态后 使用v-html渲染span标签 ,渲染的span标签设置属性contenteditable为false不可编辑,在移动端因为span不可编辑导致光标在div最右边,而不是文本右边怎么解决
时间: 2024-03-01 16:51:18 浏览: 138
normalize-contenteditable:内容可编辑块中的所有文本都应包含在标签
这个问题可能是由于移动设备上的光标处理方式不同于桌面设备所致。为了解决这个问题,您可以尝试使用JavaScript来动态设置属性来解决。具体来说,您可以在渲染<span>标签的时候判断是否处于编辑状态,如果是,则将属性contenteditable设置为true,否则设置为false。以下是一个简单的示例代码:
```html
<div id="myDiv" contenteditable="true">
<span contenteditable="false">不可编辑的文本</span>
<span contenteditable="true">可编辑的文本</span>
</div>
<script>
var div = document.getElementById("myDiv");
div.addEventListener("focus", function() {
var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].getAttribute("contenteditable") !== "true") {
spans[i].setAttribute("contenteditable", "true");
}
}
});
div.addEventListener("blur", function() {
var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].getAttribute("contenteditable") !== "false") {
spans[i].setAttribute("contenteditable", "false");
}
}
});
</script>
```
在这个示例中,我们为<div>元素设置了contenteditable属性,使其变为可编辑状态。在<div>元素上监听了focus和blur事件,当<div>元素获取焦点时,遍历其中的所有<span>标签,将contenteditable属性设置为true,使其变为可编辑状态;当<div>元素失去焦点时,遍历其中的所有<span>标签,将contenteditable属性设置为false,使其变为不可编辑状态。这样,无论是在桌面设备还是移动设备上,用户都可以正确地编辑文本并且光标的位置也会正确地显示。
阅读全文