Aynı giriş kutusuna etiket ve normal metin eklemeniz gerekiyor

Question

Aynı giriş kutusuna etiket ve metin eklemem gerekiyor. Normal metin aynı anda bir karakteri silebilir. Önceden tanımlanmış belirli bir sözcük grubundan seçilecek etiketler bir kerede silinir. Normal metin ve etiketler aynı kutuda olacaktır.

bağlantı link Şimdiye kadar etiket eklemek

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>

çalıştık keman ama etiketi üzerinde tıklama, metin kutusu ve zaman ekler zaman konudur Ben bu etiketin ardından metin yazılır, hepsi aynı etiket grubuna eklenir ve Tag + Text hepsi birlikte silinir, bir kerede tek bir karakterin silinmesi için metinlere ve aynı anda etiketlere ihtiyacım var. Lütfen bunun yerine div yerine textarea ile daha iyi bir yol öner.

Not: Etiket verilerini ayrıca düzenlenebilir aralıkta değiştirirsem. Ayrıca etiketidiv eklenir düzenlenebilir etiketleri div ve metin

Answer 1

yılında yansıtır, false onun contenteditable özelliğini ayarlayın:

el.setAttribute('contenteditable', false); 

Ben senin sorunu çözer umut - demo aşağıya bakınız:

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>