如何點擊內容編輯的DIV然後點擊期內保留焦點

在此我點擊跨度追加到div的內容的代碼，但我想要的，而不是追加它插入到光標的特定位置。

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; 
 
}

<p>Just click on an icon to add it.</p> 
 

 
<div class="custom-input"> 
 
    <div class="selectable-icons"> 
 
    <span class="label"> Ingredient1 </span> 
 
    <span class="label">INGREDIENT 2</span> 
 
     <span class="label">INGREDIENT 3</span> 
 
    </div> 
 
    <div contenteditable="true"> 
 
    You can type here. Add an icon. 
 
    </div> 
 
</div>

我嘗試了一個解決方案，這link

在所提供的鏈接提示有我使用範圍，而不是一個按鈕。當我點擊跨度時

window.getSelection

返回帶有onClick事件的span元素。焦點轉移到該範圍

來源

2017-08-29 ser cha

類似[this]（https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery）應該爲你工作。 –

單擊事件在範圍 –

是的，我知道。你想在當前光標位置添加點擊的項目嗎？ –

爲了能夠在光標位置插入您的元素，您需要在焦點丟失之前保存當前位置。然後單擊您需要在添加元素之前恢復該位置。我已經更新您的jsfiddle here

function saveSelection() { 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

function restoreSelection(range) { 
    if (range) { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.selection && range.select) { 
      range.select(); 
     } 
    } 
} 

function pasteHtmlAtCaret(html) { 
    var sel, range; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.insertNode(html); 
      restoreSelection(range); 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     document.selection.createRange().pasteHTML(html); 
    } 

}

你可以看看這裏the full paste html method

我希望這有助於。

來源

2017-08-29 12:25:05

如何點擊內容編輯的DIV然後點擊期內保留焦點

回答

相關問題