1 指定某文本部分进行操作(添加,删除,替换)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function meizz(str)
{
document.selection.createRange().select(); //javascript指定某文本部分进行操作(添加,删除,替换)
var t = document.selection.createRange();
t.text = str;
}
</SCRIPT>
<BODY>
<textarea name=mm οnclick="meizz('梅花雪')">asdfghjkl</textarea><br>
</BODY>
</HTML>
2 光标处插入文字
<?xml version="1.0" encoding="gb2312"?>
<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>更简单的在光标处插入文字 - 千一网络</title>
</head>
<body>
<form method="get">
<div><textarea id="content" cols="50" rows="5">先在本文框中点鼠标以确定光标位置。千一网络 www.cftea.com</textarea></div>
<div><input type="button" value="插入文字“A”" οnclick="javascript:Insert('A');" /></div>
<div><input type="button" value="插入文字“B”" οnclick="javascript:Insert('B');" /></div>
</form>
<script type="text/javascript" language="javascript">
<!--
//千一网络 www.cftea.com
function Insert(str)
{
document.getElementById("content").focus();
var r = document.selection.createRange();
document.selection.empty();
r.text = str;
}
-->
</script>
</body>
</html>
3
<!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>
<title>edit</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="keywords" content="XH.WebV7.0.0-Blog">
<meta http-equiv="pragma" content="no-cache">
<script type="text/javascript">
function setCaret(textObj){
if(textObj.createTextRange)
{
textObj.caretPos=document.selection.createRange().duplicate();
}
}
function insertAtCaret(textObj,textFeildValue){
if(document.all)
{
if(textObj.createTextRange&&textObj.caretPos)
{
var caretPos=textObj.caretPos;
caretPos.text=caretPos.text.charAt(caretPos.text.length-1)==''?textFeildValue+'':textFeildValue;
}else
{
textObj.value=textFeildValue;
}
}else
{
if(textObj.setSelectionRange)
{
var rangeStart=textObj.selectionStart;
var rangeEnd=textObj.selectionEnd;
var tempStr1=textObj.value.substring(0,rangeStart);
var tempStr2=textObj.value.substring(rangeEnd);
textObj.value=tempStr1+textFeildValue+tempStr2;
}else
{
alert("This version of Mozilla based browser does not support setSelectionRange");}
}
}
</script>
</head>
<body>
<form id="form1" action="" οnsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;" οnselect="setCaret(this);" οnclick="setCaret(this);" οnkeyup="setCaret(this);">
Dnew.cn Dnew.cn
</textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入" οnclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>
</body>
</html>
4
<!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>
<title>document.selection 的 createRange</title>
</head>
<body>
<div>请选中这里的部分文字。</div>
<div><input type="button" value="加粗" οnclick="javascript:Bold();" /></div>
<script type="text/javascript" language="javascript">
function Bold()
{ var r = document.selection.createRange(); r.execCommand("Bold");}</script>
</body>
</html>
以上4个例子可以直接看到效果。