Hi~
I made a test sample about contenteditable, and I found a bug that composite characters are not inserted into a contenteditable area after changing the attribute value.
The two areas are parent and child <div>s.
You can click the area that you want to edit.
But even the key input mode is composite character like as Hangul, only english will be typed instead of composite characters after click the unfocused area.
Would you send me a trouble shooting method about this problem?
The sample code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script>
var page = null,
textbox = null;
function initTest() {
page = document.getElementById("page");
textbox = document.getElementById("textbox");
document.addEventListener("beforedeactivate", eventDispatch);
document.addEventListener("beforeactivate", eventDispatch);
initFocus();
}
function initFocus() {
page.setAttribute("contenteditable", true);
page.focus();
}
function eventDispatch(e) {
switch(e.type) {
case "beforedeactivate":
disableArea(e.target);
break;
case "beforeactivate":
enableArea(e.target);
break;
}
}
function disableArea(target) {
var block = getParentBlock(target);
if (!block) {
return;
}
block.removeAttribute("contenteditable");
}
function enableArea(target) {
var block = getParentBlock(target);
if (!block) {
return;
}
block.setAttribute("contenteditable", true);
}
function getParentBlock(node) {
var parent = node;
while(parent && parent.id !== "page" && parent.id !== "textbox") {
parent = parent.parentNode;
}
return parent;
}
</script>
</head>
<body onload="javascript:initTest();">
<div id="page" style="width:500px; height:500px; border:2px solid red;">
<div id="textbox" style="width:200px; height:200px; border:2px solid blue; ; left:100px; top:100px;">
<p><span><br></span></p>
</div>
<p><span><br></span></p>
</div>
</body>
</html>