可编辑内容 - 聚焦和点击问题

Question

我有一个可编辑的内容 div，用户可以向其中添加元素。用户有一个带有所有可用标签的侧边菜单，可以通过单击每个标签来添加这些标签。也可以在每个标签之前/之后输入文本。

每个标签元素都有contenteditable="false"，例如：

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="1">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla</span>
    </label>
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="2">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla bla 2</span>
    </label>
  <label class="keyword-item" contenteditable="false">
        <input type="hidden" value="18">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla2</span>
     </label>
</div>

这有两个问题（至少在 Chrome 中）：

1. 当我使用键盘箭头浏览这些项目时，效果很好。但是，鼠标导航有点奇怪。似乎无法在第二个和第三个图标之间找到光标。
2. 第一个项目只有在它前面聚焦并按DEL键才能删除，它不会通过在它后面聚焦并按退格键来删除。

提前致谢

Answer 1

您可以使用flex 完成您想要的工作：

#expression-textarea {
  padding-left: 2px;
  display: flex;
}

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
  white-space: nowrap;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
      bla bla 2
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla2
  </div>
  <span></span>
</div>

我还修改了一些标记 - 删除 inputs，使用 divs 而不是 labels，等等。

使用上面的代码，使用箭头和鼠标进行导航就像您所期望的那样工作。

左侧包装div 上的填充是为了让您可以在div 的开头看到光标。

Answer 2

你能用按钮代替标签/输入吗？它似乎解决了鼠标选择问题。 在 contenteditable div 开头添加一个空标签可以删除第一个标签。

.keyword-item {
  border: none;
  background: none;
  font: inherit;
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  padding: 0 .5rem;
  margin: 0 .25rem;
}

<div contenteditable="true" id="expression-textarea">
  <span></span>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla</span>
  </button>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla bla 2</span>
  </button>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla2</span>
  </button>
</div>

Answer 3

使用display: inline-block; 和white-space: nowrap;

编辑： 删除标签之间的空间

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 1rem;
  white-space:nowrap;
  display:inline-block;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea"><label class="keyword-item" contenteditable="false">
    <input type="hidden" value="1">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla</span>
    </label><label class="keyword-item" contenteditable="false">
    <input type="hidden" value="2">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla bla 2</span>
    </label><label class="keyword-item" contenteditable="false">
        <input type="hidden" value="18">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla2</span>
     </label>
</div>