zoukankan      html  css  js  c++  java
  • javascript中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>

  • 相关阅读:
    寻找字符串中只出现一次的第一个字符
    【二叉树】已知二叉树前序序列和中序序列,重建唯一二叉树
    单向链表插入与删除
    【二叉树->链表】二叉树结构转双向线性链表结构(先序遍历)
    先序构建二叉树及先序遍历二叉树
    【Leetcode】寻找数串中连续最大整数和且最大长度的子串
    稀疏矩阵存储、转置、乘法运算
    面试编程题拾遗(06) --- 打印n对括号的全部有效组合
    面试编程题拾遗(05) --- 括号匹配检查
    做到这一点,你也可以成为优秀的程序员
  • 原文地址:https://www.cnblogs.com/dsliang/p/1362914.html
Copyright © 2011-2022 走看看