同じ入力ボックスにタグと通常のテキストを追加する必要があります

Question

タグとテキストを同じ入力ボックスに追加する必要があります。通常のテキストは、一度に文字を削除することができます。予め定義された特定の単語セットから選択されるタグは、一度にすべて削除される。通常のテキストとタグは同じボックスに表示されます。

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>

に試してみましたが、タグのクリックは、それがテキストボックスとするとき、私にそれを追加したときに問題があるのフィドルするためのリンクそのタグの後ろにテキストを書いてください。このすべてが同じスパンのタグに追加され、Tag + Textも一緒に削除されます。一度に1文字ずつ削除する必要があります。 divの代わりにtextareaでこれを実現するより良い方法を提案してください。

注：編集可能なスパンのタグデータを変更した場合。私はそれがあなたの問題を解決を願ってい

el.setAttribute('contenteditable', false); 

- デモ下記参照：タグがdivに追加された場合も、タグとテキスト

Answer 1

の編集可能なDIVに反映、falseへのcontenteditable属性を設定します。

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>