zoukankan      html  css  js  c++  java
  • 将选中的文本置为不选中状态

    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"> 
    <!-- 
    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=" 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>

  • 相关阅读:
    mysql最后一个内容orm
    mysql第五天:
    mysql第二天 数据的增删改查补充及外键
    MYsql 初识
    第二天openc的内容:图片的缩放、旋转、格式转换
    第二个内容第一天 opencv的基本内容:
    第五十七天 bom 的新知识
    第五十六天jQurey的内容新增:
    第五十五天jQery内容的进阶
    windows11 upgrade
  • 原文地址:https://www.cnblogs.com/xinzhuangzi/p/4100473.html
Copyright © 2011-2022 走看看