javascript:textarea在光标位置插入文字
今天有个朋友让我给她解决个小问题，她希望在textarea中选中一段文字，然后给这段文字前后动态加上样式，还希望在未选中文字的前提下，在光标所在位置也能加入样式，我一想，这用javascript实现不难，然后在网上查找了些资料，写了出来，但有点遗憾的是：这段javascript只支持IE浏览器，在Firefox浏览器下没有效果，以下就是整个例子代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<META http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>测试</title>
<script language="javascript" type="text/javascript">
<!--
function change(color){
var obj = document.getElementById("tarea");
var text = obj.document.selection.createRange().text;
if (text.length>0){
var origin = obj.value;
var s1 = origin.substring(0,origin.indexOf(text));
var s2 = origin.substring(origin.indexOf(text)+text.length);
if (color=='red'){
obj.value = s1+"<font color='red'>"+text+"</font>"+s2;
}else if (color=='black'){
obj.value = s1+"<font color='black'>"+text+"</font>"+s2;
}else if (color=='blue'){
obj.value = s1+"<font color='blue'>"+text+"</font>"+s2;
}
}else{
addText(obj,"<font color='red'></font>");
}
}
function addText(oTextarea,strText){
clipboardData.setData("text",strText);
oTextarea.focus();
document.execCommand("paste");
}
//-->
</script>
</head>
<body>
<textarea name=”tarea” id=”tarea” cols=”40″ rows=”5″>点击按钮改变颜色样式</textarea><br/>
<input type=”button” name=”bt” onclick=”change(‘red’)” value=”红色”>
<input type=”button” name=”bt” onclick=”change(‘black’)” value=”黑色”>
<input type=”button” name=”bt” onclick=”change(‘blue’)” value=”蓝色”>
</body>
</html>
如无转载说明，则均为本站原创文章，转载请注明：来源：子猴博客
坐个沙发~
路过，支持一下，O(∩_∩)O~ 站点很漂亮。