zoukankan      html  css  js  c++  java
  • 关于createTextRange和createRange的一些用法【转】

    一、返回createTextRange的text和htmlText

    <mce:script language="javascript"><!--
    function test()
    {
    var rng=document.body.createTextRange();
    alert(rng.text)
    }
    function test1()
    {
    var rng=document.body.createTextRange();
    alert(rng.htmlText)
    }
    // --></mce: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="确定">
    <mce:script language="javascript"><!--
    function test()
    {
    var o=document.getElementById("inp1")
    var r = document.selection.createRange();
    if(o.createTextRange().inRange(r))
    alert(r.text);
    }
    // --></mce:script>


    三、页面文本倒序查找

    abababababababa
    <input value="倒序查找a" onclick=myfindtext("a") type="button">
    <mce: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");}
    }
    // --></mce:script>


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

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


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

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


    六、控制input框内光标位置

    <mce: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();
    }
    // --></mce: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>


    七、选中文本框中的一段文字

    <mce: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();
    }
    // --></mce: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)>
    <mce:script language="javascript"><!--
    function go(n){
    demo.focus();
    with(document.selection.createRange())
    {
    moveStart("character",n);
    collapse();
    select();
    }
    }
    // --></mce:script>

    九、取光标位置
    <body>
    <div id=box>点击textarea</div>
    <mce: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)
    }
    // --></mce:script>
    <textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

  • 相关阅读:
    【C语言天天练(二二)】位操作
    远程调用内核接口的封装类(RCKObjs)
    03010_防止SQL注入
    PHP 5 SimpleXML 函数
    PHP 5 String 函数
    PHP 5 MySQLi 函数
    PHP 杂项 函数
    PHP PDO
    PHP 5 时区
    分享海量 iOS 及 Mac 开源项目和学习资料
  • 原文地址:https://www.cnblogs.com/hejia/p/4242146.html
Copyright © 2011-2022 走看看