selection对象使用方法
发布在Range对象及文本操作2015年1月24日view:8061
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
  • 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)>   

实例二

    <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">
    function test2()
    {
        var t=document.getElementById("test")
        var o=t.createTextRange()
        alert(o.text)
        o.moveStart("character",2)
        alert(o.text)
        o.select()
    }
    //-->   
</SCRIPT>
<input type='text' id='test' name='test'><input type=button onclick='test2()' value='test' name='test3'>
对textarea中的内容,进行选中后,加效果
<script language="JavaScript">
    <!--
            function bold(){
                Qr=document.selection.createRange().text;
                if(!Qr || document.selection.createRange().parentElement().name!='description')
                {
                    txt=prompt('Text to be made BOLD.','');
                    if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';
                }
                else{
                    document.selection.createRange().text=''+document.selection.createRange().text+'';
                    document.selection.empty();
                }
            }
</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>   
评论
发表评论
暂无评论
PUBLISHED IN
Range对象及文本操作

输入框内文本操作的相关介绍及有关的属性和方法

友情链接 大搜车前端团队博客
我的收藏