您的位置：首页 > Web前端 > JavaScript

js实现textarea选中文字并加粗

2016-03-09 12:43 573 查看
转载自:http://www.zjmainstay.cn/js-textarea-select-modify

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航