createtextrange createrange区别:

对象或元素不同，虽然都是返回TextRange。例如：


    var r=document.body.createTextRange()
    var r=document.createRange()

document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange，Range -- 范围

返回createTextRange的text和htmlText

  1. <script language="javascript">
  2. function test()
  3. {
  4. var rng=document.body.createTextRange();
  5. alert(rng.text)
  6. }
  7. function test1()
  8. {
  9. var rng=document.body.createTextRange();
  10. alert(rng.htmlText)
  11. }
  12. </script>
  13. <input type="button" onclick="test()" value="text">
  14. <input type="button" onclick="test1()" value="htmlText">

获取指定文本框中的选中的文字：只响应第一个文本框

  1. <input id="inp1" type="text" value="1234567890">
  2. <input id="inp2" type="text" value="9876543210">
  3. <input type="button" onclick="test()" value="确定">
  4. <script language="javascript">
  5. function test()
  6. {
  7. var o=document.getElementById("inp1")
  8. var r = document.selection.createRange();
  9. if(o.createTextRange().inRange(r))
  10. alert(r.text);
  11. }
  12. </script>

页面文本倒序查找

  1. abababababababa
  2. <input value="倒序查找a" onclick=myfindtext("a") type="button">
  3. <script language ='javascript'>
  4. var rng = document.body.createTextRange();
  5. function myfindtext(text)
  6. {
  7. rng.collapse(false);
  8. if(rng.findText(text,-1,1))
  9. {
  10. rng.select();
  11. rng.collapse(true);
  12. }else
  13. {alert("end");}
  14. }
  15. </script>

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

  1. <script language="javascript">
  2. function setFocus()
  3. {
  4. var obj = event.srcElement;
  5. var txt =obj.createTextRange();
  6. txt.moveStart('character',obj.value.length);
  7. txt.collapse(true);
  8. txt.select();
  9. }
  10. </script>
  11. <input type="text" value="http://toto369.net" onfocus="setFocus()">

得到文本框内光标位置

  1. <script language="javascript">
  2. function getPos(obj){
  3. obj.focus();
  4. var s=document.selection.createRange();
  5. s.setEndPoint("StartToStart",obj.createTextRange())
  6. alert(s.text.length);
  7. }
  8. </script>
  9. <input type="text" id="txt1" value="1234567890">
  10. <input type="button" value="得到光标位置" onclick=getPos(txt1)>

控制input框内光标位置

  1. <script language="javascript">
  2. function setPos(num)
  3. {
  4. text1.focus();
  5. var e =document.getElementById("text1");
  6. var r =e.createTextRange();
  7. r.moveStart('character',num);
  8. r.collapse(true);
  9. r.select();
  10. }
  11. </script>
  12. <input type="text" id="text1" value="1234567890">
  13. <select onchange="setPos(this.selectedIndex)">
  14. <option value="0">0</option>
  15. <option value="1">1</option>
  16. <option value="2">2</option>
  17. <option value="3">3</option>
  18. <option value="4">4</option>
  19. <option value="5">5</option>
  20. <option value="6">6</option>
  21. <option value="7">7</option>
  22. </select>

选中文本框中的一段文字

  1. <script language=javascript>
  2. function sel(obj,num)
  3. {
  4. var rng=obj.createTextRange()
  5. var sel = rng.duplicate();
  6. sel.moveStart("character", num);
  7. sel.setEndPoint("EndToStart", rng);
  8. sel.select();
  9. }
  10. </script>
  11. <input type="text" id="text1" value="1234567890">
  12. <select onchange="sel(text1,this.value)">
  13. <option value="0">0</option>
  14. <option value="1">1</option>
  15. <option value="2">2</option>
  16. <option value="3">3</option>
  17. <option value="4">4</option>
  18. <option value="5">5</option>
  19. <option value="6">6</option>
  20. <option value="7">7</option>
  21. </select>

控制文本框内光标的移动

  1. <input type="button" value="<" onclick=go(-1)>
  2. <input id="demo" value="这里是文字">
  3. <input type="button" value=">" onclick=go(1)>
  4. <script language="javascript">
  5. function go(n){
  6. demo.focus();
  7. with(document.selection.createRange())
  8. {
  9. moveStart("character",n);
  10. collapse();
  11. select();
  12. }
  13. }
  14. </script>

取光标位置

  1. <body>
  2. <div id=box>点击textarea</div>
  3. <mce:script type="text/javascript"><!--
  4. function doit()
  5. {
  6. var rng = event.srcElement.createTextRange();
  7. rng.moveToPoint(event.x,event.y);
  8. rng.moveEnd("character",event.srcElement.value.length)
  9. box.innerText = "光标位置：" + (event.srcElement.value.length - rng.text.length)
  10. }
  11. // --></mce:script>
  12. <textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

在文本框中设置内容后，在将选定的文本删除

    1. <script>
    2. function storeCaret (textEl) {
    3. if (textEl.createTextRange)
    4. textEl.caretPos = document.selection.createRange().duplicate();
    5. }
    6. function insertAtCaret (textEl, text) {
    7. if (textEl.createTextRange && textEl.caretPos) {
    8. var caretPos = textEl.caretPos;
    9. caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;
    10. } else
    11. textEl.value = text;
    12. }
    13. function deleteAtCaret (textEl) {
    14. if (textEl.createTextRange && textEl.caretPos) {
    15. var caretPos = textEl.caretPos;
    16. document.selection.clear();
    17. }
    18. //alert(aForm.aTextArea.
    19. }
    20. </script>
    21. <form name=aForm>
    22. <input name=aTextArea size=120 wrap=soft onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。>
    23. <br>
    24. <input type=text name=aText size=80 value=我要在光标处插入这些文字><br>
    25. <input type=button value=我要在光标处插入上面文本框里输入的文字！ onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
    26. <input type=button value=删除选中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>
    27. </FORM>

javascript中createTextRange用法(focus)的更多相关文章

  1. javascript中typeof用法

    JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值: 1. 'undefined' --- 这个值未定义: 2. 'bool ...

  2. JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法

    今天在写一个todolist待办事项项目,需要单击编辑待办事项的内容,百度搜了一下这几个方法的用法,总结一下 focus()方法:获得键盘焦点,单击之后就调用绑定的js方法,在span标签里面加一个输 ...

  3. javascript中in用法介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript中递归函数用法需要注意的

    <script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1);//return num ...

  5. 学习javascript中this用法的一些感悟

    要想真正的掌握this,应该先要掌握javascript代码执行上下文环境的创建.转换和销毁机制:

  6. JavaScript中setInterval用法

    setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...

  7. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  8. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  9. JavaScript中一些怪异用法的理解

    引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...

随机推荐

  1. C. Tourist's Notes

    题目链接 题意:n天内登山,相邻两次登山的高度差的绝对值小于等于1,也就是说每次高度变化只能是:0,1,-1.我们已经知道n天中部分天数人所在的山的高度,求最大的登山高度. 输入: n m  n 是天 ...

  2. grep是模糊匹配

    1. 我:我用的ps -nat|grep -i "80"|wc -l命令 我:解释详细点,,龙哥,对于我这种菜鸟:也是模糊匹配 :你用 grep "80" 会匹 ...

  3. JVM垃圾回收机制总结(4) ：新一代的垃圾回收算法

    垃圾回收的瓶颈 传统分代垃圾回收方式,已经在一定程度上把垃圾回收给应用带来的负担降到了最小,把应用的吞吐量推到了一个极限.但是他无法解决的一个问题,就是Full GC所带来的应用暂停.在一些对实时性要 ...

  4. 275. H-Index II

    题目: Follow up for H-Index: What if the citations array is sorted in ascending order? Could you optim ...

  5. 网页爬虫的设计与实现（Java版）

    网页爬虫的设计与实现(Java版)     最近为了练手而且对网页爬虫也挺感兴趣,决定自己写一个网页爬虫程序. 首先看看爬虫都应该有哪些功能. 内容来自(http://www.ibm.com/deve ...

  6. SSIS ->> Null & Null Functions

    SSIS不支持值为NULL的变量.每种类型的变量都有自己的默认值. 做了一个测试,用一个Execute SQL Task输出一个NULL值给A变量,然后把A变量传到到另外一个Execute SQL T ...

  7. 生产环境的redis高可用集群搭建

    这里只是总结一下安装步骤 如果要了解redis集群高可用的原理,推荐仔细看一遍配置文件示例http://download.redis.io/redis-stable/redis.conf,源码包里也有 ...

  8. mysql union和union all

    UNION 操作符用于合并两个或多个 SELECT 语句的结果集.UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型. union 是对数据进行并集操作,不包括重复 ...

  9. babel安装

    大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...

  10. 安卓自动化测试之MonkeyRunner环境的搭建

    最近在抽时间学习一些安卓自动化的知识,把学到东西都就记录下来,避免以后记性不好忘记,也方便对自己积累知识的查阅 MonkeyRunner是基于坐标点来操作控件的,你可以通过写python脚本来调用mo ...