可编辑内容——焦点和点击问题

Question

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

每个标签元素都有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）：

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

提前致谢

Answer 1

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

编辑：删除标签

之间的space

.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>

Answer 2

你能用按钮代替 label/input 吗？它似乎解决了鼠标选择问题。在 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

您可以使用 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.

的开头看到光标

可编辑内容——焦点和点击问题

Editable Content - focus and click problems

html

css

contenteditable