5
我需要在同一个输入框中添加标签和文本。普通文本可以一次删除一个字符。将从预先定义的一组特定词中选择的标签将一次全部删除。正常的文本和标签将在同一个盒子上。需要在同一输入框中添加标签和普通文本
链接摆弄link 到目前为止,我已经试过
document.querySelector('.selectable-icons').addEventListener('click', function(e) {
document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
});
document.querySelector('div').addEventListener('keydown', function(event) {
// Check for a backspace
if (event.which == 8) {
s = window.getSelection();
r = s.getRangeAt(0)
el = r.startContainer.parentElement
// Check if the current element is the .label
if (el.classList.contains('label')) {
// Check if we are exactly at the end of the .label element
if (r.startOffset == r.endOffset && r.endOffset == el.textContent.length) {
// prevent the default delete behavior
event.preventDefault();
if (el.classList.contains('highlight')) {
// remove the element
el.remove();
} else {
el.classList.add('highlight');
}
return;
}
}
}
event.target.querySelectorAll('span.label.highlight').forEach(function(el) { el.classList.remove('highlight');})
});
[contenteditable] {
border: 1px solid #000;
margin: 0.4em 0;
line-height: 1.4em;
-webkit-appearance: textfield;
appearance: textfield;
}
img {
vertical-align: top;
max-height: 1.4em;
max-width: 1.4em;
}
.selectable-icons img {
cursor: pointer;
}
span.label.highlight {
background: #E1ECF4;
border: 1px dotted #39739d;
}
span.label {
background: #E1ECF4;
border: 1px dotted #39739d;
}
<p>Just click on an icon to add it.</p>
<div class="custom-input">
<div class="selectable-icons">
<span class="label"> Tag </span>
<span class="label"> Tag 2 </span>
<span class="label">Tag 3</span>
</div>
<div contenteditable="true">
You can type here. Add an icon.
</div>
</div>
添加标签,但问题是,当点击该标签是将其添加到文本框,当我在该标签之后写入文本,将所有内容添加到相同的标签范围,并将标签+文本全部一起删除,而我需要将文本同时删除一个字符并将标签一次全部删除。请建议一个更好的方式来实现这与textarea而不是div。
注意:如果我更改了也是可编辑的范围内的标签数据。在标签的可编辑的div和文本
工程很好。请建议一种方式,我可以在用户可编辑的textarea而不是div @kukkuz –
@sercha with'textarea'?我不太确定如何去... – kukkuz
没问题。你可以添加一个功能,如果我改变标签数据反映在可编辑的div –