You must add tags and plain text in the same input field.

Question

I need to add tags and text in the same input field. In plain text, you can delete a character at the same time. Tags that will be selected from a specific set of words that are predefined will be deleted immediately. Plain text and tags will be in the same field.

Link to script link So far I tried

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> 

add tags, but the problem is when you click on the tag that it adds to the text box, and when I write the text after this tag, all this is added to the same tag tag and tag + text, all are deleted together, and me need text to delete one character at a time and all tags at once. Please suggest a better way to achieve this using textarea instead of div.

Note. If I change tag data in a range that are also editable. Also reflected in editable div tags and text

Answer 1

When a tag is added to a div , set its contenteditable attribute to false :

 el.setAttribute('contenteditable', false); 

I hope that solves your problem - see demo below:

 document.querySelector('.selectable-icons').addEventListener('click', function(e) { var el = e.target.cloneNode(true); el.setAttribute('contenteditable', false); document.querySelector('[contenteditable]').appendChild(el); }); 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>