Created
November 7, 2015 05:31
-
-
Save llh911001/e7d2ab804d3d5cb652b5 to your computer and use it in GitHub Desktop.
contenteditable insert at cursor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div id="area" style="width:300px;height:300px;" onblur="onDivBlur();" onmousedown="return cancelEvent(event);" onclick="return cancelEvent(event);" contentEditable="true" onmouseup="saveSelection();" onkeyup="saveSelection();" onfocus="restoreSelection();"></div> | |
<script type="text/javascript"> | |
var savedRange,isInFocus; | |
function saveSelection() | |
{ | |
if(window.getSelection)//non IE Browsers | |
{ | |
savedRange = window.getSelection().getRangeAt(0); | |
} | |
else if(document.selection)//IE | |
{ | |
savedRange = document.selection.createRange(); | |
} | |
} | |
function restoreSelection() | |
{ | |
isInFocus = true; | |
document.getElementById("area").focus(); | |
if (savedRange != null) { | |
if (window.getSelection)//non IE and there is already a selection | |
{ | |
var s = window.getSelection(); | |
if (s.rangeCount > 0) | |
s.removeAllRanges(); | |
s.addRange(savedRange); | |
} | |
else if (document.createRange)//non IE and no selection | |
{ | |
window.getSelection().addRange(savedRange); | |
} | |
else if (document.selection)//IE | |
{ | |
savedRange.select(); | |
} | |
} | |
} | |
//this part onwards is only needed if you want to restore selection onclick | |
var isInFocus = false; | |
function onDivBlur() | |
{ | |
isInFocus = false; | |
} | |
function cancelEvent(e) | |
{ | |
if (isInFocus == false && savedRange != null) { | |
if (e && e.preventDefault) { | |
//alert("FF"); | |
e.stopPropagation(); // DOM style (return false doesn't always work in FF) | |
e.preventDefault(); | |
} | |
else { | |
window.event.cancelBubble = true;//IE stopPropagation | |
} | |
restoreSelection(); | |
return false; // false = IE style | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment