उसी इनपुट बॉक्स में टैग और सामान्य टेक्स्ट जोड़ने की आवश्यकता है

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>

की कोशिश की है टैग जोड़ने, लेकिन जब टैग पर क्लिक यह पाठ बॉक्स और जब करने के लिए कहते हैं मुद्दा है मैं उस टैग के बाद टेक्स्ट लिखें, यह सब टैग के समान अवधि में जोड़ा जाता है और टैग + टेक्स्ट सभी को एक साथ हटा दिया जाता है, बल्कि मुझे टेक्स्ट को एक बार में एक बार हटाया जाना चाहिए और टैग एक बार में सभी को हटाया जाना चाहिए। कृपया div के बजाय textarea के साथ इसे प्राप्त करने का एक बेहतर तरीका सुझाएं।

नोट: यदि मैं अवधि में टैग डेटा बदलता हूं जो संपादन योग्य भी है। इसके अलावा टैग की संपादन योग्य div और पाठ

Answer 1

जब टैगdiv में जोड़ा जाता है में दर्शाता है, false करने के लिए अपने contenteditable विशेषता निर्धारित:

el.setAttribute('contenteditable', false); 

मुझे आशा है कि आपकी समस्या का हल - डेमो नीचे देखें:

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>