TextRange对象的学习（一）

最新推荐文章于 2022-11-15 22:04:40 发布

胖鹅68

最新推荐文章于 2022-11-15 22:04:40 发布

阅读量731

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/17112885

版权

这两天为了解决FCKeditor中粘贴弹出“是否允许访问剪贴板的内容”时，无意中接触到了DHTML中的TextRange这个对象（代表 HTML 元素中的文本），对代码很是不明白，才抽时间学习了这个，下面是我在网上找资料并且自己学习心得

<!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=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
	function(){
		
	}
);
function rdl_doSelect() {
    var oMessage = document.all("oMessage");
	//在body标签下面创建TextRange对象,含有htmlText和text两个属性，代表创建范围内的文本内容
    var oTextRange = document.body.createTextRange();
	alert(oTextRange.htmlText);//弹出的信息是body标签内的所有内容包含html标签
    with(oTextRange) {
        moveToElementText(oMessage);//将oTextRange的返回限定在oMessage对象上，即id为oMessage的组件
		//弹出的信息为id为oMessage的组件的信息内容，对象还是之前创建的oTextRange，只是改变了其范围
		alert(htmlText);//由于这里使用了with,可以省略oTextRange，实际完整写法是oTextRange.htmlText
		//表示在oTextRange对象的范围内容进行全部选择操作，这个命令可以查看帮助文档，有很多，当然有些还是不支持的
        execCommand("SelectAll");
    }
}
function rdl_doClear() 
{
	//selection是document的一个对象，clear()表示要清除选中区的内容。
	//因此不执行选中方法，则执行清楚方法效果是看不出来的，当然也可以用鼠标执行选中操作。
    document.selection.clear();
}


</script>
<title>无标题文档</title>
</head>
<body>
	<span id=oMessage>我是要被清除的信息。</span>
	<br><br>
	<input type=button value=" 选择 " οnclick="rdl_doSelect();">&nbsp;
	<input type=button value=" 清除 " οnclick="rdl_doClear();">
</body>
</html>

TextRange对象可以缩小自己的文本范围，然后再执行一些命令，可以完成“界面操作”

<HTML>
	<HEAD>
		<TITLE>JavaScript--execCommand指令集</TITLE>
			<SCRIPT LANGUAGE="javascript">
 <!--
/*
*该function执行copy指令
*/
function fn_doufucopy(){
	edit.select();
	document.execCommand('Copy');
}
/*
*该function执行paste指令
*/
function fn_doufupaste() { 
	tt.focus();
	document.execCommand('paste');
} 
/*
*该function用来创建一个超链接
*/
function fn_creatlink()
{
	document.execCommand('CreateLink',true,'true');//弹出一个对话框输入URL
	//document.execCommand('CreateLink',false,'http://www.51js.com');
}
/*
*该function用来将选中的区块设为指定的背景色
*/
function fn_change_backcolor()
{
	document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以
}
/*
*该function用来将选中的区块设为指定的前景色,改变选中区块的字体大小,改变字体,字体变粗变斜
*/
 
function fn_change_forecolor()
{
	//指定前景色
	document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以
	//指定背景色
	document.execCommand('FontSize',false,7);   //true或false都可以
	//字体必须是系统支持的字体
	document.execCommand('FontName',false,'标楷体');   //true或false都可以
	//字体变粗
	document.execCommand('Bold');
	//变斜体
	document.execCommand('Italic');
}
 
 /*
 
 *该function用来将选中的区块加上不同的线条
 
 */
 
function fn_change_selection()
{
	//将选中的文字加下划线
	document.execCommand('Underline');
	//在选中的文字上划粗线
	document.execCommand('StrikeThrough');
	//将选中的部分文字变细
	document.execCommand('SuperScript');
	//将选中区块的下划线取消掉
	document.execCommand('Underline'); 
}
 
 /*
 
   *该function用来将选中的区块排成不同的格式
 
   */
 
function fn_format()
{
	//有序列排列
	document.execCommand('InsertOrderedList');
	//实心无序列排列
	document.execCommand('InsertUnorderedList');
	//空心无序列排列
	document.execCommand('Indent');
}

/*
*该function用来将选中的区块剪下或是删除掉
*/
function fn_CutOrDel()
{
	//删除选中的区块
	//document.execCommand('Delete');
	//剪下选中的区块
	document.execCommand('Cut');
}
/*
*该function用来将选中的区块重设为一个相应的物件
*/
function fn_InsObj()
{
	/*
	******************************************
	* 以下指令都是为选中的区块重设一个object;
	* 如没有特殊说明,第二个参数true或false是一样的;
	* 参数三表示为该object的id;
	* 可以用在javascript中通过其指定的id来控制它
	******************************************
	*/
	/*重设为一个button(InsertButton和InsertInputButtong一样,
	只不前者是button,后者是input)*/
	/*document.execCommand('InsertButton',false,"aa"); //true或false无效
	document.all.aa.value="风舞九天";*/
	//重设为一个fieldset
	/*document.execCommand('InsertFieldSet',true,"aa");
	document.all.aa.innerText="刀剑如梦";*/
	//插入一个水平线
	//document.execCommand('InsertHorizontalRule',true,"aa");
	//插入一个iframe
	//document.execCommand('InsertIFrame',true,"aa");
	//插入一个InsertImage,设为true时需要图片,false时不需图片
	//document.execCommand('InsertImage',false,"aa");
	//插入一个checkbox
	//document.execCommand('InsertInputCheckbox',true,"aa");
	//插入一个file类型的object
	//document.execCommand('InsertInputFileUpload',false,"aa");
	//插入一个hidden
	/*document.execCommand('InsertInputHidden',false,"aa");
	alert(document.all.aa.id);*/
	//插入一个InputImage
	/*document.execCommand('InsertInputImage',false,"aa");
	document.all.aa.src="F-a10.gif";*/
	//插入一个Password
	//document.execCommand('InsertInputPassword',true,"aa");
	//插入一个Radio
	//document.execCommand('InsertInputRadio',false,"aa");
	//插入一个Reset
	//document.execCommand('InsertInputReset',true,"aa");
	//插入一个Submit
	//document.execCommand('InsertInputSubmit',false,"aa");
	//插入一个input text
	//document.execCommand('InsertInputText',false,"aa");
	//插入一个textarea
	//document.execCommand('InsertTextArea',true,"aa");
	//插入一个 select list box
	//document.execCommand('InsertSelectListbox',false,"aa");
	//插入一个single select
	document.execCommand('InsertSelectDropdown',true,"aa");
	//插入一个line break(硬回车??)
	//document.execCommand('InsertParagraph');
	//插入一个marquee
	/*document.execCommand('InsertMarquee',true,"aa");
	document.all.aa.innerText="bbbbb";*/
	//用于取消选中的阴影部分
	//document.execCommand('Unselect');
	//选中页面上的所有元素
	//document.execCommand('SelectAll');
}
/*
*该function用来将页面保存为一个文件
*/
function fn_save()
{
	//第二个参数为欲保存的文件名
	document.execCommand('SaveAs','mycodes.txt');
	//打印整个页面
	//document.execCommand('print');
}
--> 
</SCRIPT>
      </HEAD>
      <body>
          <input id="edit" value="范例" NAME="edit"><br>
          <button οnclick="fn_doufucopy()" ID="Button1">Copy</button> <button οnclick="fn_doufupaste()" ID="Button2">
               paste</button><br>
          <textarea id="tt" rows="10" cols="50" NAME="tt"></textarea>
          <hr>
          <br>
          浮沉聚散变化又再,但是总可卷土重来.<br>
          天若有情天亦老,人间正道是沧桑.<br>
          都怪我,太执着,却也等不到花开叶落.<br>
          <br>
          Please select above letters, then click following buttons:<br>
          <hr>
          <input type="button" value="创建CreateLink" οnclick="fn_creatlink()" ID="Button3" NAME="Button3"><br>
          <input type="button" value="改变文字背景色" οnclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br> 
          <input type="button" value="改变文字前景色" οnclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br>
          <input type="button" value="给文字加线条" οnclick="fn_change_selection()" ID="Button6" NAME="Button6"><br>
          <input type="button" value="改变文字的排列" οnclick="fn_format()" ID="Button7" NAME="Button7"><br>
          <input type="button" value="删除或剪下选中的部分" οnclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br>
          <input type="button" value="插入Object" οnclick="fn_InsObj()" ID="Button9" NAME="Button9"><br>
          <input type="button" value="保存或打印文件" οnclick="fn_save()" ID="Button10" NAME="Button10"><br>
          <input type="button" value="测试Refresh属性" οnclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11">
      </body>
 </HTML>

选中需要修改的范围，然后点击按钮，就能改变页面的内容——自己用鼠标选择范围，很是有意思

备注：上面的代码只在IE中执行才能看到效果，查了相关的资料说是支持FF，但是目前还没有测试成功，下次写一个支持火狐的。

胖鹅68

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TextRange对象的学习（一）

这两天为了解决FCKeditor中粘贴弹出“是否允许访问剪贴板的内容”时，无意中接触到了DHTML中的TextRange这个对象（代表 HTML 元素中的文本），对代码很是不明白，才抽时间学习了这个，下面是我在网上找资料并且自己学习心得 $(document).ready( function(){ });function rdl_doSele
复制链接

扫一扫