欢迎来到 jackNEss'窝窝
I like simple mind

如何往光标所在区域插入符号

2015年08月03日

textarea-range

老生常谈问题之一,主要用于实现简单的表情符号插入,最近有同事遇上,发现正好也是自己的短板,赶紧梳理一下吧。

这功能实现 分 ie 和 其他浏览器 2种方式, 值得注意的是,下面提供的方法只限于用在textarea 文本框, input 框 并不适用(IE 的错)。

/**
 * cursorPosition Object
 */
var cursorPosition = {
    get: function (textarea) {
        var rangeData = { text: "", start: 0, end: 0 };

        if (textarea.setSelectionRange) { // W3C	
            textarea.focus();
            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) { // IE
            textarea.focus();
            var oS = document.selection.createRange(),
                oR = document.body.createTextRange(),
                i;

            oR.moveToElementText(textarea);
            rangeData.text = oS.text;
            rangeData.bookmark = oS.getBookmark();
            
            // object.moveStart(sUnit [, iCount]) 
            // Return Value: Integer that returns the number of units moved.
            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) == '\r') {
                    i++;
                }
            }
            rangeData.start = i;
            rangeData.end = rangeData.text.length + rangeData.start;
        }

        return rangeData;
    },

    set: function (textarea, rangeData) {
        var oR, start, end;
        if (!rangeData) {
            alert("You must get cursor position first.")
        }
        textarea.focus();
        if (textarea.setSelectionRange) { // W3C
            textarea.setSelectionRange(rangeData.start, rangeData.end);
        } else if (textarea.createTextRange) { // IE
            oR = textarea.createTextRange();

            // Fixbug : ues moveToBookmark()
            // In IE, if cursor position at the end of textarea, the set function don't work
            if (textarea.value.length === rangeData.start) {
                //alert('hello')
                oR.collapse(false);
                oR.select();
            } else {
                oR.moveToBookmark(rangeData.bookmark);
                oR.select();
            }
        }
    },

    add: function (textarea, rangeData, text) {
        var oValue, nValue, oR, sR, nStart, nEnd, st;
        this.set(textarea, rangeData);

        if (textarea.setSelectionRange) { // W3C
            oValue = textarea.value;
            nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
            nStart = nEnd = rangeData.start + text.length;
            st = textarea.scrollTop;
            textarea.value = nValue;
            // Fixbug:
            // After textarea.values = nValue, scrollTop value to 0
            if (textarea.scrollTop != st) {
                textarea.scrollTop = st;
            }
            textarea.setSelectionRange(nStart, nEnd);
        } else if (textarea.createTextRange) { // IE
            sR = document.selection.createRange();
            sR.text = text;
            sR.setEndPoint('StartToEnd', sR);
            sR.select();

        }
    }
};

例子:http://www.jackness.org/lab/2015/textarea-ranage/demo.html

分类javascript
阅读 59
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS