使用Dom的Range对象处理chrome和IE文本光标位置
有这样一段js:
var sel = obj.createTextRange();
sel.move('character', num);
sel.collapse();
sel.select();
那么在IE中是没有问题的,如:textArea它是可以创建出createTextRange对象的。那么下面的三句就是让当前的鼠标“光标”停留在num的位置(可以查询相关的资料)。这段代码你可选择在click中去触发。
也可以在focus中触发,这个时机你可以自己控制。
同样的效果在chrome中可以使用:
obj.selectionStart = obj.selectionEnd = num;
来设置光标的位置,当然chrom中是不支持createTextRange方法的,当然也有其它的方式去实现,这里不做介绍。。。
那么问题来了,如果你选择在HTML元素的click事件中去触发那么你是幸运的,可以做到和IE的效果没有任何的不同。但如果你一定要在focus中去触发,那么完蛋了,该发生的效果并没有发生!
经过尝试之后还是十分幸运的,我们可以绕过这个问题。浏览器在处理focus和click事件时的顺序是,先触发focus后出发click。那么我们就可以配合这两个方法去间接实现这个过程了。
提供简单的代码供参考:
var focusStart = 0;
document.getElementById('textArea的id').onclick = function () {
if (focusStart) {
moveEnd(this);
focusStart = 0;
}
}
document.getElementById('textArea的id').onfocus = function () {
if (document.selection) {
moveEnd(this);
} else {
focusStart = 1;
}
}
function moveEnd(obj) {
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.focus();
obj.selectionStart = obj.selectionEnd = len;
}
}
使用Dom的Range对象处理chrome和IE文本光标位置的更多相关文章
- JS 之DOM range对象
DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...
- XML DOM - Range 对象
Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...
- getSelection、range 对象属性,方法理解,解释
网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...
- web前端学习(二)html学习笔记部分(3)--range对象
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
- HTML5中的Range对象的研究
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = docu ...
- HTML5中的Range对象的研究(转载)
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = docu ...
- HTML5 编辑 API 之 Range 对象(一)
一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...
- 处理Selection对象和Range对象——Word VBA中重要的两个对象
处理Selection对象和Range对象——Word VBA中重要的两个对象 Word 开发人员参考Selection 对象代表窗口或窗格中的当前所选内容.所选内容代表文档中选定(或突出显示)的区域 ...
- 运用 Range 对象处理 Word 文档内容
运用 Range 对象处理 Word 文档内容 在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...
随机推荐
- ZOJ 3157 Weapon
题目传送门 题意:就是CF round# 329 B 的升级版,要求出相交点的个数 分析:逆序数用树状数组维护,求出非逆序数,然后所有情况(n * (n - 1)) / 2减之就是逆序数个数. #in ...
- Partran,Nastran和ANSYS的区别
Partran .Nastran是MSC公司的产品.Patran是前处理器,用于建模.划分网格.设定载荷和边界条件等等:Nastran只是MSC公司提供的求解器之一,主要用于结构分析和热分析,应用的是 ...
- Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后使用 ObjectContext对象
Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后的继承对象为DbContext,以前的熟悉的ObjectContext对象不见了,当然使用ObjectConte ...
- 游戏 tabpanel
using UnityEngine; using System.Collections; public class La : MonoBehaviour { private int select; p ...
- BZOJ3672 : [Noi2014]购票
设d[i]表示i到1的距离 f[i]=w[i]+min(f[j]+(d[i]-d[j])*v[i])=w[i]+d[i]*v[i]+min(-d[j]*v[i]+f[j]) 对这棵树进行点分治,每次递 ...
- ashx 集成于Ihandle 简易 高性能 web
不用搞MV4..如果你用.ashx写的后台..自己加一个switch case就实现了路由...更方便,还不用配置 scaffold 不是dynamic data里面的东西吗 现在我全是ash ...
- TYVJ P1098 任务安排 Label:倒推dp 不懂
描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...
- NOIP200002税收与补贴
试题描述 每样商品的价格越低,其销量就会相应增大.现已知某种商品的成本及其在若干价位上的销量(产品不会低于成本销售),并假设相邻价位间销量的变化是线性的且在价格高于给定的最高价位后,销量以某固定数值递 ...
- C# int转byte[],byte[]转int
第一种方法: byte数组转int u = (uint)(b[0] | b[1] << 8 |b[2] << 16 | b[3] << 24); int转byte数 ...
- CSS3选择器(二)之属性选择器
CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...