2014年04月13日 07:33:07

js实现textarea选中文字并加粗

作者: 
本文提供一个兼容火狐、谷歌、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学习笔记
阅读( 13322 )
看完顺手点个赞呗:
(6 votes)

1.PHP cURL群:PHP cURL高级技术
2.正则表达式群:专精正则表达式
3. QQ联系(加请说明):QQ联系博主(951086941)
4. 邮箱:zjmainstay@163.com
5. 打赏博主:

网站总访问量: