javascript中createTextRange用法(focus)
createtextrange createrange区别:
对象或元素不同,虽然都是返回TextRange。例如:
var r=document.body.createTextRange()
var r=document.createRange()
document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange,Range -- 范围
返回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>
取光标位置
- <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
在文本框中设置内容后,在将选定的文本删除
- <script>
- function storeCaret (textEl) {
- if (textEl.createTextRange)
- textEl.caretPos = document.selection.createRange().duplicate();
- }
- function insertAtCaret (textEl, text) {
- if (textEl.createTextRange && textEl.caretPos) {
- var caretPos = textEl.caretPos;
- caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;
- } else
- textEl.value = text;
- }
- function deleteAtCaret (textEl) {
- if (textEl.createTextRange && textEl.caretPos) {
- var caretPos = textEl.caretPos;
- document.selection.clear();
- }
- //alert(aForm.aTextArea.
- }
- </script>
- <form name=aForm>
- <input name=aTextArea size=120 wrap=soft onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=这是例子,你可以在这里添加文字、插入文字。>
- <br>
- <input type=text name=aText size=80 value=我要在光标处插入这些文字><br>
- <input type=button value=我要在光标处插入上面文本框里输入的文字! onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
- <input type=button value=删除选中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>
- </FORM>
javascript中createTextRange用法(focus)的更多相关文章
- javascript中typeof用法
JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值: 1. 'undefined' --- 这个值未定义: 2. 'bool ...
- JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法
今天在写一个todolist待办事项项目,需要单击编辑待办事项的内容,百度搜了一下这几个方法的用法,总结一下 focus()方法:获得键盘焦点,单击之后就调用绑定的js方法,在span标签里面加一个输 ...
- javascript中in用法介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript中递归函数用法需要注意的
<script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1);//return num ...
- 学习javascript中this用法的一些感悟
要想真正的掌握this,应该先要掌握javascript代码执行上下文环境的创建.转换和销毁机制:
- JavaScript中setInterval用法
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...
- JavaScript中常见的数组操作函数及用法
JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...
- JavaScript中常见的字符串操作函数及用法
JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...
- JavaScript中一些怪异用法的理解
引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...
随机推荐
- C连接oracle(PROC*C)
1. 安装oralce 10g 2.建立数据库和用户 配置VS2005环境 proc需要嵌入式环境 在C/C++常规里面加入 D:\oracle\product\10.2.0\db_1\precom ...
- Java7编程高手进阶读书笔记--final学习
这段时间终于有了一些自己的时间,在网上淘了一本书把java学习下,顺便记下每日的学习心得 工作快两年多了,才知道基础的东西永远看的时候都有一个新的体验,今天中午看了下final,把自己炒的代码贴在这以 ...
- 阿里云centos6搭建vpn
下载脚本 wget http://latrell.me/wp-content/uploads/vpn_centos6.sh 运行脚本 chmod a+x vpn_centos6.sh ./vpn_ce ...
- JSP的设计模式
1.JSP模型1(JSP+JavaBean) JSP页面负责处理请求,并将响应发送给客户端.JSP页面文件包括:login.html.loginchk.jsp.welcome.jsp.JavaBean ...
- python操作json
概念 序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON.XML等.反序列化就是从存储区域(JSON,XML)读取反序列化对象的状态 ...
- 原生javascript-常用的函数
[一]添加监听事件 addHandler:function(node,type,fn){if(node.addEventListener){ node.addEventListener(type,fn ...
- 《Linux/Unix系统编程手册》读书笔记5
<Linux/Unix系统编程手册>读书笔记 目录 第8章 本章讲了用户和组,还有记录用户的密码文件/etc/passwd,shadow密码文件/etc/shadow还有组文件/etc/g ...
- 批处理 —— 每天生成一个以日期命名的文件(Win XP)
想达到这样一个效果:每天在某个目录下生成一个以日期命名的文件(如,0705.txt). 第一步,新建一个批处理文件 新建一个文件,比如[create_day_file.bat].编辑,输入以下内容 : ...
- VMware虚拟机中的常用文件介绍
虚拟机的文件管理由VMware Workstation来执行.一个虚拟机一般以一系列文件的形式储存在宿主机中,这些文件一般在由workstation为虚拟机所创建的那个目录中. 如下图所示:(< ...
- leetcode:Merge Two Sorted Lists(有序链表的归并)
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...