js实现textarea选中文字并加粗

2014年04月13日 07:33:07

作者： Zjmainstay

本文提供一个兼容火狐、谷歌、IE的textarea文字选中并添加加粗标记的功能，类似富文本编辑器的选中加粗。

<!DOCTYPE html>
<html>
<head>
	<title>js实现textarea选中文字并加粗</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<body>
<textarea id="content" cols="50" rows="5">AAAAAAA BBBBBBB AAAAAAA CCCCCCC</textarea>
<input type="button" id="wrapText" value="加粗"/>
<script type="text/javascript">
    var selectionStart, selectionEnd;
    var textarea = document.getElementById("content");
    
    document.onkeyup = document.onmouseup = function(event){
        event = event || window.event;
        var keyCode = event.keyCode || event.which;
        
        var userSelection;
        if (window.getSelection) { //现代浏览器
            userSelection = window.getSelection();
        } else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
            userSelection = document.selection.createRange();
        }

        var getRangeIndex = function(selectionObject) {
            if (window.getSelection)
                return [textarea.selectionStart, textarea.selectionEnd];
            else { // 较老版本Safari!
                var range               = document.selection.createRange();             //对选择的文字create Range
                // var selectText          = range.text;                                //选中的文字
                var selectTextLength    = range.text.length;                            //选中文字长度
                textarea.select();                                                      //textarea全选
                //StartToStart、StartToEnd、EndToStart、EndToEnd
                range.setEndPoint("StartToStart", document.selection.createRange());    //指针移动到选中文字开始
                var selectTextPosition  = range.text.length;                            //选中文字的结束位置
                range.collapse(false);                                                  //将插入点移动到当前范围的开始
                range.moveEnd("character", -selectTextLength);   //更改范围的结束位置，减去长度，字符开始位置，character不能改
                range.moveEnd("character", selectTextLength);   //再更改范围的结束位置，到字符结束位置
                range.select();                                                         //然后选中字符
                
                //返回字符的开始和结束位置
                return [selectTextPosition - selectTextLength, selectTextPosition];
            }
        }
        
        var rangeIndex = getRangeIndex(userSelection);
        selectionStart = rangeIndex[0];
        selectionEnd   = rangeIndex[1];
    };
    
    //加粗
    document.getElementById('wrapText').onclick = function(){
        textarea.value = textarea.value.substring(0, selectionStart) 
            + '<b>' + textarea.value.substring(selectionStart, selectionEnd) 
            + '</b>' + textarea.value.substring(selectionEnd); 
    };

//注：关于textRange方法的部分注释根据个人理解写的，有异议欢迎提出
    
//参考文档：
//1. 《通过 JavaScript 获取和设置光标在输入框中的位置（兼容 IE 及 Firefox）》 http://www.2cto.com/kf/201112/115328.html
//2. 《JS Range HTML文档/文字内容选中、库及应用介绍》 http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/
//3. 《详探TextRange对象--查找与选择》 http://www.cnblogs.com/sweting/archive/2009/07/12/1521782.html
</script>
</body>
</html>

未经同意禁止转载！
转载请附带本文原文地址：js实现textarea选中文字并加粗，首发自 Zjmainstay学习笔记

阅读( 13297 )

看完顺手点个赞呗：

(6 votes)

标签：