在網上找了好久，終于解決了這個問題。這裡記錄一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<style type="text/css">
#div {
border: 1px solid gray;
width: 800px;
height: 41px;
}
</style>
</head>
<body>
<div id="div" contenteditable="true">點選按鈕把圖檔拼接過來...</div>
<button id="btn" onclick="btnClick()">光标聚焦到最後</button>
<script type="text/javascript">
function btnClick() {
//建立一個圖檔元素
var img = document.createElement('img');
img.src = '//www.baidu.com/img/baidu_jgylogo3.gif';
//把圖檔放到div裡，并讓光标聚焦到内容最後
var div = document.getElementById('div');
div.appendChild(img);
//這裡如果使用"div.focus()"，則光标總是出現在最前面
focusEnd(div);
}
//将光标聚焦到可編輯div内容末尾(el為DOM對象)
function focusEnd(el){
el.focus();
if($.support.msie) {
var range = document.selection.createRange();
this.last = range;
range.moveToElementText(el);
range.select();
document.selection.empty(); //取消選中
} else {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
//傳回一個Selection對象，表示使用者選擇的文本範圍或光标的目前位置
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
</script>
</body>
</html>
參考連結：http://www.cnblogs.com/jonie-wong/p/5519822.html
![reactnative在文本框光标處插入文字的實作方法[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)