zoukankan      html  css  js  c++  java
  • 文本光标,高亮选中一些出来

    document.body.onmouseup=function(){
    	if(window.getSelection){
    		if(window.getSelection().toString()!==""){
    		 alert("显示弹出框");
    		 window.getSelection().removeAllRanges()//用于清除高亮选中
    		}
    	
    	}
    	else if(document.selection){
    		if(document.selection.createRange().text!==""){
    		 alert("显示弹出框");
    		 
    		 //document.selection.clear();用于清除选中内容
    		 document.selection.empty()//用于清除高亮选中
    		}
    	
    	}
    };
    
    公告:CSDN 搜索第二版正式上线!    Hadoop与大数据精彩议题发布     2000元大奖征异构开发博文
    CSDN博客频道搬家功能改版正式上线!    【免费】解读海外市场营销奥秘    CSDN博客频道推出TAG功能

    js createRange与createTextRange的一些用法实例

    1061人阅读 评论(0) 收藏 举报

    一、返回createTextRange的text和htmlText 
     
    <script language="javascript"><!--
    function test()
    {
    var rng=document.body.createTextRange();
    alert(rng.text)
    }
    function test1()
    {
    var rng=document.body.createTextRange();
    alert(rng.htmlText)
    }
    // --></script>
    <input type="button" onclick="test()" value="text">
    <input type="button" onclick="test1()" value="htmlText">

    二、获取指定文本框中的选中的文字:只响应第一个文本框

     
    <input id="inp1" type="text" value="1234567890">
    <input id="inp2" type="text" value="9876543210">
    <input type="button" onclick="test()" value="确定">
    <script language="javascript"><!--
    function test()
    {
    var o=document.getElementById("inp1")
    var r = document.selection.createRange();
    if(o.createTextRange().inRange(r))
    alert(r.text);
    }
    // --></script>

    三、页面文本倒序查找

     
    abababababababa
    <input value="倒序查找a" onclick=myfindtext("a") type="button">
    <script language ='javascript'><!--
    var rng = document.body.createTextRange();
    function myfindtext(text)
    {
    rng.collapse(false);
    if(rng.findText(text,-1,1))
    {
    rng.select();
    rng.collapse(true);
    }else
    {alert("end");}
    }
    // --></script>

    四、聚焦控件后把光标放到最后

     
    <script language="javascript"><!--
    function setFocus()
    {
    var obj = event.srcElement;
    var txt =obj.createTextRange();
    txt.moveStart('character',obj.value.length);
    txt.collapse(true);
    txt.select();
    }
    // --></script>
    <input type="text" value="http://jb51.net" onfocus="setFocus()">

    五、得到文本框内光标位置

     
    <script language="javascript"><!--
    function getPos(obj){
    obj.focus();
    var s=document.selection.createRange();
    s.setEndPoint("StartToStart",obj.createTextRange())
    alert(s.text.length);
    }
    // --></script>
    <input type="text" id="txt1" value="1234567890">
    <input type="button" value="得到光标位置" onclick=getPos(txt1)>

    六、控制input框内光标位置 
     
    <script language="javascript"><!--
    function setPos(num)
    {
    text1.focus();
    var e =document.getElementById("text1");
    var r =e.createTextRange();
    r.moveStart('character',num);
    r.collapse(true);
    r.select();
    }
    // --></script>
    <input type="text" id="text1" value="1234567890">
    <select onchange="setPos(this.selectedIndex)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>

    七、选中文本框中的一段文字
     
    <script language=javascript><!--
    function sel(obj,num)
    {
    var rng=obj.createTextRange()
    var sel = rng.duplicate();
    sel.moveStart("character", num);
    sel.setEndPoint("EndToStart", rng);
    sel.select();
    }
    // --></script>
    <input type="text" id="text1" value="1234567890">
    <select onchange="sel(text1,this.value)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>

    八、控制文本框内光标的移动

     
    <input type="button" value="<" onclick=go(-1)>
    <input id="demo" value="这里是文字">
    <input type="button" value=">" onclick=go(1)>
    <script language="javascript"><!--
    function go(n){
    demo.focus();
    with(document.selection.createRange())
    {
    moveStart("character",n);
    collapse();
    select();
    }
    }
    // --></script>
    /[html]
    九、取光标位置
    [html]
    <body>
    <div id=box>点击textarea</div>
    <script type="text/javascript"><!--
    function doit()
    {
    var rng = event.srcElement.createTextRange();
    rng.moveToPoint(event.x,event.y);
    rng.moveEnd("character",event.srcElement.value.length)
    box.innerText = "光标位置:" + (event.srcElement.value.length - rng.text.length)
    }
    // --></script>
    <textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

    十、用鼠标选择部分字体,选择的字体就自动粘贴在textarea中 
     
    <html>
    <script>
    function aa(){
    newT=document.selection.createRange()
    clipboardData.setData("Text",newT.text)
    document.all.pp.value=clipboardData.getData("Text")
    }
    </script>
    <span id=ww onmouseup=aa()>
    测试一下这个中这你好我是skanso
    </span>
    <textarea name=pp></textarea>
    </html>


  • 相关阅读:
    【BZOJ4676】Xor-Mul棋盘 拆位+状压DP
    【BZOJ4688】One-Dimensional 矩阵乘法
    【BZOJ4704】旅行 树链剖分+可持久化线段树
    【BZOJ4709】[Jsoi2011]柠檬 斜率优化+单调栈
    【BZOJ4711】小奇挖矿 树形DP
    【BZOJ4715】囚人的旋律 DP
    【BZOJ4712】洪水 树链剖分优化DP+线段树
    服务器相关 HTTP 请求错误
    RSA算法
    公钥和私钥解释
  • 原文地址:https://www.cnblogs.com/gaoxue/p/2783182.html
Copyright © 2011-2022 走看看