document.selection详解 -

xcy13638760

浏览: 52468 次

最近访客更多访客>>

afra.liu

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

document.selection详解

IE：document.selection 　　FireFox：window.getSelection() 　　document.selection只有IE支持，window.getSelection()也只有FireFox和 Safari支持，都不是标准语法。
selection 对象

--------------------------------------------------------------------------------

代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
selection 对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对 document 对象应用 selection 关键字。要对选中区执行操作，请先用 createRange 方法从选中区创建一个文本区域对象。

一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

一个简单的例子

<html><head><title>document.selection.createRange例子</title></head><body>

<div>请选中这里的部分文字。</div><div><input type="button" value="加粗" onclick="javascript :Bold();" /></div>

<script language="javascript">

function Bold(){

var bo = document.selection.createRange();

bo.execCommand("Bold");

}</script>

</body></html>

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

实例一：

<textarea cols=50 rows=15>
哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea>
<input type=button value=选择字后点击我看看 onclick=alert(document.selection.createRange().text)>
</form>

实例二：

<body>
<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
</textarea>
<input type="button" value="showSelection" onclick="alert(document.selection.createRange().text)">
<input type="button" value="showclear" onclick="alert(document.selection.clear().text)">
<input type="button" value="showtype" onclick="alert(document.selection.type)">
<textarea name="textfield" cols="50" rows="6" onselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
</textarea>

</body>

实例三：选中Input中的文本

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<input type='text' id='test' name='test'><input type=button onclick='test2()' value='test' name='test3'>
对textarea中的内容，进行选中后，加效果
<script language="JavaScript">

</script>
<input type="button" value="加粗" onclick="bold();" />
<textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea>
实例四：javascript捕获到选中的网页中的纯文本内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标取词</title>
<script>
function getSel()
{
var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))
document.forms[0].selectedtext.value = t;
}
</script></head>
<body onmouseup="getSel()">
<form>
<textarea name="selectedtext" rows="5" cols="50"></textarea>
</form>
以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)
如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText
</body>
</html>

分享到：