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
    
  • 相关阅读:
    checkpoint threat cloud 更改中国区更新库
    2021关于算法的“想象”
    安装Hadoop
    BUG:@RabbitListener的concurrency属性
    Redisson使用01
    spring boot项目整合mybatis访问数据源
    MyBatis Generator使用记录
    spring boot集成Swagger
    PostgreSQL常用命令(持续更新)
    2021Y12M学技术感悟
  • 原文地址:https://www.cnblogs.com/xiaomier/p/3167635.html
Copyright © 2011-2022 走看看