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
    
  • 相关阅读:
    .Net2.0 中 Page 页面的事件触发顺序
    vs 中自带的代码混淆器 Dotfuscator (图)
    SqlHelper 中文注释版(值得收藏)
    (原创)用重载实现 treeview 的无限分类递归调用(图)
    通过前置代码指定嵌套中的 Repeater 事件!
    vs2008 中提高开发效率的一些快捷键
    强内聚,弱耦合
    也谈 SQL 注入攻击。
    ASP.NET 页面中动态加载用户控件
    ASP 调用存储过程,同时返回记录集和输出参数
  • 原文地址:https://www.cnblogs.com/xiaomier/p/3167635.html
Copyright © 2011-2022 走看看