首先我们先要获取光标位置,这一步还是比较简单的,看下代码

// 用 rangeData 对象作为数据存储并获得焦点
var rangeData = {start: 0, end: 0, text: "" };
textarea.focus();

// 对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易
rangeData.start= el.selectionStart;
rangeData.end = el.selectionEnd;

// 扩展一下,通过截取我们可以得到光标的选区内容
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";

在编辑器中,获取光标位置都是非常重要的,很多人可能认为较复杂,其实只要处理好浏览器的兼容,还是比较容易实现的,下面我弄了一个辅助方法

  // 获取光标辅助方法
  function getCursorPosition(textarea) {
    var rangeData = {text: "", start: 0, end: 0 };
    textarea.focus();
    if (textarea.setSelectionRange) {
        rangeData.start= textarea.selectionStart;
        rangeData.end = textarea.selectionEnd;
        rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
    } else if (document.selection) {
        var i,
            oS = document.selection.createRange(),
            // Don't: oR = textarea.createTextRange()
            oR = document.body.createTextRange();
        oR.moveToElementText(textarea);

        rangeData.text = oS.text;
        rangeData.bookmark = oS.getBookmark();

        for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
            // Why? You can alert(textarea.value.length)
            if (textarea.value.charAt(i) == '\n') {
                i ++;
            }
        }
        rangeData.start = i;
        rangeData.end = rangeData.text.length + rangeData.start;
    }

    return rangeData;
  }

我们获取到位置之后就可以插入想要的数据了

  function insertAtCursor(myField, myValue) {
    if (document.selection) {
        // IE support
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
        sel.select();
    } else if (myField.selectionStart || myField.selectionStart == '0') {
        // MOZILLA/NETSCAPE support
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        var beforeValue = myField.value.substring(0, startPos);
        var afterValue = myField.value.substring(endPos, myField.value.length);

        myField.value = beforeValue + myValue + afterValue;

        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
        myField.focus();
    } else {
        myField.value += myValue;
        myField.focus();
    }
  }

如何使用?

insertAtCursor(document.getElementById('input'),"33333");