uni-app中div设置contenteditable为true在可编辑的情况下

uni-app中div设置contenteditable为true在可编辑的情况下

示例代码：

<template>
<div class="editable-box w-100" contenteditable="true">
<span contenteditable="false">&nbsp@小明&nbsp</span>
<span contenteditable="false">&nbsp@小红&nbsp</span>
<span contenteditable="false">&nbsp@小东&nbsp</span>
<span contenteditable="false">&nbsp@小黄&nbsp</span>
</div>
</template>

操作步骤：

<template>
<div class="editable-box w-100" contenteditable="true">
<span contenteditable="false">&nbsp@小明&nbsp</span>
<span contenteditable="false">&nbsp@小红&nbsp</span>
<span contenteditable="false">&nbsp@小东&nbsp</span>
<span contenteditable="false">&nbsp@小黄&nbsp</span>
</div>
</template>

预期结果：

可编辑的情况下，删除子元素时，一个一个删除。

实际结果：

连续的子元素一次性被删除完毕

bug描述：

代码描述：div设置contenteditable为true在可编辑的情况下，连续的多个子元素设置为contenteditable为false。 bug描述：期望连续的多个子元素一个一个删除，但是实际情况是所有的子元素被一次性删除了

示例图片


更多关于uni-app中div设置contenteditable为true在可编辑的情况下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中div设置contenteditable为true在可编辑的情况下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你想将一个 div 设置为可编辑状态（即 contenteditable="true"），你可以直接在 div 标签上添加 contenteditable 属性。这样用户就可以直接在 div 中输入和编辑内容。

以下是一个简单的示例：

<template>
  <view>
    <!-- 设置 div 为可编辑状态 -->
    <div contenteditable="true" @input="handleInput">
      在这里输入内容...
    </div>
  </view>
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      // 获取用户输入的内容
      const content = event.target.innerText;
      console.log('用户输入的内容:', content);
    }
  }
}
</script>

<style>
/* 你可以根据需要添加样式 */
div[contenteditable="true"] {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
}
</style>
回到顶部