的JavaScript：獲得CONTENTEDITABLE DIV

光標位置我非常新的JavaScript和希望這裏有人能幫助我的以下內容：的JavaScript：獲得CONTENTEDITABLE DIV

主要是尋找在IE 8的解決方案 - 如果它甚至可以覆蓋其他瀏覽器/版本更好。我有一個只有一個contenteditable div動態創建幷包含文本和HTML標籤的頁面。在頁面上，我想添加一個按鈕，將光標位置的某些文本插入此div。

到目前爲止，我有以下代碼罰款，只要我選擇在div文本其作品，但如果我只是定位有我的光標沒有做出任何選擇它插入我的股利之外的文本。

我怎樣才能得到它隨時添加我的文字在光標位置現在在選擇位置它以同樣的方式？（我甚至都不需要更換一個選擇，因爲它只會在光標所在位置需要另外，這將只需要爲一個特定的div。）

我的代碼：

<html> 
<head> 
<script type="text/javascript"> 
    function test() 
    { 
     var input = "TEST"; 
     document.selection.createRange().pasteHTML(input); 
    } 
</script> 

</head> 
<body> 
    <div id="myDiv" contenteditable>This is a test text.</div><br /> 
    <button type="button" onclick="test()">Test</button> 
</body> 
</html>

Tim

來源

2013-10-27 user2571510

你的問題是<button>元素偷竊了焦點並在click事件在IE中觸發時破壞了選擇。你可以使<button>不可選，這將阻止它能夠獲得焦點。這是使用unselectable attribute在IE中完成：

<button type="button" unselectable="on" onclick="test()">Test</button>

演示：http://jsbin.com/aqAYUwu/5

另一種方法是不太好的，我的觀點是改用mousedown事件，並防止默認動作：

<button type="button" unselectable="on" 
    onmousedown="test(); return false">Test</button>

您可以在這裏找到一個跨瀏覽器函數，以在當前光標位置處插入HTML：

https://stackoverflow.com/a/6691294/96100

最後一個注意：contenteditable不是一個布爾屬性，所以嚴格地說你應該給它一個值（即， <div contenteditable="true">），雖然<div contenteditable>確實在我試過它。

來源

2013-10-28 10:42:37

感謝這所有的瀏覽器工作。即使它似乎仍然失去焦點並將文本插入到我的div上方（當我之前選擇了文本部分時它仍然正常工作），評論和鏈接仍然非常有幫助。有沒有辦法強制它插入特定的div來避免這種情況？ – user2571510

@ user2571510：JSBin鏈接是否無法正常工作？對我來說，IE 7很好。 –

謝謝，蒂姆。你對一個焦點的按鈕是正確的。我在這裏的問題是，問題中的按鈕是在Bootbox對話框（如提示框）內，那裏的按鈕只有一個類，但沒有ID，所以我不知道如何將不可選屬性添加到它。 – user2571510

的JavaScript：獲得CONTENTEDITABLE DIV

回答

相關問題