一般来说文本输入框是可以用input（单行）和textarea（多行）的，但是，如果想在文本中间插入图片之类的非文本节点，或者文本设置不同的样式，这时候两个就不行了。可以用可编辑的div来实现。
把一个div设置成可编辑的，只需要把添加属性：contenteditable="true"就可以了。比如：<div id="d1" contenteditable="true">asdfasdf</div>这时候div就像文本框一样可以输入文本内容了，和文本框不同的是，div的结构会随着输入的内容变化的，按enter键换行其实在可编辑的div里新加了div元素，文本内容放在span元素里。
如果想插入图片或者设定某断字符串的字号等样式，就需要知道焦点的位置或者是选择文本的位置。对于不同的浏览器，大致有两个解决的方法：
一种是根据document.selection属性，适合IE10以及IE10以下的ie浏览器。
一种是根据window.getSelection()方法，适合webkit内核（chrome、UC等）、firefox浏览器以及IE11等。
1.IE10-
看下面的例子：
<script type="text/javascript">Range对象里记录了选中的文本和起始焦点的位置，只不过里面记录的是位置（坐标）信息，而我们想要知道的是光标在第几个字符后面闪烁，这样才好插入图片等节点。这里使用Range的compareEndPoints方法，新建一个Range，从前往后挨个字符的移动焦点，移动一次判断下是否移动到了原来Range的后面了。
//绑定文本焦点改变事件
document.onselectionchange = function (e) {
//判断是否支持document.selection属性
if (document.selection) {
var pos = 0;
var range = document.selection.createRange();
var srcele = range.parentElement();
//新建一个range，焦点在开头
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
//判断copy的焦点起始部分是否在range的焦点起始部分的后面
for (pos = 0; copy.compareEndPoints("StartToStart", range) < 0; pos++) {
//copy的焦点向后移动一个字符
copy.moveStart("character", 1);
}
document.getElementById('i1').value = pos;
document.getElementById('i2').value = range.htmlText;
}
}
</script>
焦点位置：<input id="i1">选中文本：<input id="i2">
<div id="d1" contenteditable="true" style="width:200px;height:100px;border:1px solid black">1234567890abcdef
</div>
2.chrome UC等
看下面的例子：
<script type="text/javascript">Selection对象看起来比ie10-用的Range对象要好用一些，相对来说也更好理解。里面记录了开始位置、结束位置、开始元素、结束元素等信息，选中的文本需要根据这些信息自己计算。需要注意的是，例子中判断了startEl == endEl，说明开始元素和结束元素可能是不同的元素的。这对应的情况就是，几个span挨在一起，从一个span的文本选到另一个span的文本，中间可能有好几个span，那这时候的开始位置和结束位置又是什么呢？试一下应该知道，开始位置是开始焦点在开始dom元素中的序号，结束位置是结束时候的焦点在结束dom元素中的序号。这时候就需要使用相邻兄弟元素的操作了。IE10中也涉及这个问题，不再赘述。
//绑定文本焦点改变事件 注意：firefox不支持document.onselectionchange，可以换成别的事件来触发比如mouseup什么的
document.onselectionchange = function (e) {
//判断是否支持document.selection属性
if (window.getSelection) {
//获取Selection对象
var se = window.getSelection();
//获取起始位置，这个是字符的序号位置，而不是坐标
var start = se.anchorOffset;
//获取结束位置
var end = se.focusOffset;
//获取起始的dom元素
var startEl = se.anchorNode.parentElement;
//获取结束的dom元素
var endEl = se.focusNode.parentElement;
//获取起始dom元素的文本内容
var startText = startEl.innerText;
var txt = '';
if (startEl == endEl) {
txt = startText.substring(start, end);
}
document.getElementById('i1').value = start;
document.getElementById('i2').value = txt;
}
}
</script>
起始位置：<input id="i1">选中文本：<input id="i2">
<div id="d1" contenteditable="true" style="width:200px;height:100px;border:1px solid black">1234567890abcdef
</div>