SOURCE

var ime;


var editarea = document.querySelector("div#editarea");
var ime_edit = document.querySelector("div#ime_edit");
var pose_updated = false;



function updatePos(e) {
    var sel = document.getSelection();
    var range = sel.getRangeAt(0);
    var rect = range.getBoundingClientRect();
    var temp_note = null;
    
    if(rect.height == 0) {
        
        if(pose_updated) {
            setTimeout(function(){pose_updated = false;}, 0);
            console.log("1")
            return;
        }
        temp_note = document.createTextNode("1")
        range.insertNode(temp_note);
        rect = range.getBoundingClientRect();
        
        console.log(rect)
    } else {
        pose_updated = false;
    }

    ime_edit.style.top = rect.bottom + "px";
    ime_edit.style.left = rect.left + "px";
    if(temp_note != null) {
        temp_note.remove();
        pose_updated = true;
    }
}

// editarea.addEventListener("input", updatePos);
// editarea.addEventListener("selectchange", updatePos);
document.addEventListener("selectionchange", updatePos);

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>测试-假输入法</title>
</head>

<body>
	<div id="editarea" contenteditable="true">&thinsp;ffffffff</div>
	<div id="ime_edit">
		<div class="preedit">wo'wo'wo'wo'wo</div>
		<ol class="choose">
			<li>我</li>
			<li>我</li>
			<li>我</li>
			<li>我</li>
			<li>我</li>
		</ol>
	</div>
    What's the fuck? 
</body>

</html>

#editarea {
    border: 1px solid black;
    min-height: 3.6em;
    line-height: 1.2;
    padding: 3px;
    border-radius: 3px;
    background: #fffff9;
    /* 听说这个属性没了？ */
    user-select: none;
}

#editarea:focus {
    outline: 2px solid #a0F0F0FF;
    user-select: contain;
}

#ime_edit {
    background: #fafafe;
    padding: 2px;
    width: fit-content;
    border: 2px solid #f0f0f0;
    box-shadow:2px 2px 3px #616161, 0px 0px 8px #7D7D7D;
    border-radius: 4px;
    position:fixed;
    user-select: none;
}

.preedit {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    
}

.choose {
    padding: 0;
    margin: 0;
    counter-reset: choice;
}

.choose li {
    list-style: none;
    margin: 0;
    padding: 0 2px;
    display: inline-block;

}

.choose li::before {
    counter-increment: choice;
    content: counter(choice) ".";
}