zoukankan      html  css  js  c++  java
  • createTextRange用法

    createTextRange

    [Huoho.Com编辑]

    版本:DHTML Object Model 返回值:有
    语法:
    oTextRange = object . createTextRange ()
    参数:

    返回值:
    oTextRange : 对象(Element)。如果成功的话返回被建立的 TextRange 对象。

    说明:
    为 object 建立 TextRange 对象。
    使用此 TextRange 对象可以检索和修改 object 内的文本。 TextRange 对象的 htmlText 特性尤其提供了方便。
    应用于:
    IE4.0+ BODYBUTTONINPUT

    createTextRange用法
    一、返回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://toto369.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> 
                                                                                                                                                           --转自 CSDN

  • 相关阅读:
    147-SpirngBoot指定编译那个文件的xml文件?
    146-springboot打war包设置
    145-sprinboot导入的内嵌jsp依赖是什么?
    mybatis中映射文件和实体类的关联性
    Quartz使用-入门使用(java定时任务实现)
    java SSLContext
    方法参数传递
    JSP写的图书管理系统
    JAVA---数组
    SpringBoot 2.x 后WebMvcConfigurationAdapter 过时
  • 原文地址:https://www.cnblogs.com/ada313/p/1562422.html
Copyright © 2011-2022 走看看