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 ...

随机推荐

ArrayList，LinkedList，Vector，Stack之间的区别
一,线程安全性 Vector.Stack:线程安全 ArrayList.LinkedList:非线程安全二,实现方式 LinkedList:双向链表 ArrayList,Vector,Stack:数 ...
shell脚本接收输入
shell脚本接受输入 while read var do cat logs | grep IconsendRedirect | grep $var | awk -F'\t' '{print $8}' ...
JVM垃圾回收机制总结(2) ：基本算法概述
1.引用计数收集器 (Reference Counting) 引用计数是垃圾收集的早期策略.在这种方法中,堆中每一个对象都有一个引用计数.一个对象被创建了,并且指向该对象的引用被分配给一个变量,这个对 ...
Windows Services Windows Services的操作
Windows Services的操作一.服务的创建: 1.新建项目——Windows服务 2.这是每个人都会犯的错误,新建一个项目后,都会按F5(运行),就会出现如下错误: 3.安装服务有很多种方 ...
URL重写的优缺点分析
如何增强您网站地址的可读性.如何让搜索引擎快速收录到您的站点,这就需要优化您的Url,即Url的重写技术,大家熟悉的可能有很多服务器都提供Url重写技术,以前我们用的最多的就是Apache,Jboss ...
南阳理工ACM 括号匹配问题,并求出使得括号能够匹配需要新增的最小括号数(括号匹配（二）)
描述给你一个字符串,里面只包含"(",")","[","]"四种符号,请问你需要至少添加多少个括号才能使这些括号匹配起 ...
vm上安装ubuntu
图解演示环境版本: 本机系统: WIN7 虚拟机:VMware Workstation 8 (英文版) 安装目标:Ubuntu Desktop 12.04 LTS (请点击这里)先下载好iso镜像文 ...
STL笔记(2) STL之父访谈录
年3月,dr.dobb's journal特约记者, 著名技术书籍作家al stevens采访了stl创始人alexander stepanov. 这份访谈纪录是迄今为止对于stl发展历史的最完备介绍 ...
基于Linux的oracle数据库管理 part4( shell管理上 )
主要内容 1. shell 基础补充 2. shell脚本与 SQL*PLUS shell 基础补充 - $(()) 中内容被看做是算术表达式, 其中的变量有没有”$”都可以, 例如 result = ...
Codeforces Round #272 (Div. 2) C. Dreamoon and Sums (数学思维)
题目链接这个题取模的时候挺坑的!!! 题意:div(x , b) / mod(x , b) = k( 1 <= k <= a).求x的和分析: 我们知道mod(x % b)的取值范围为 ...

javascript中createTextRange用法(focus)

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

随机推荐

热门专题