光标的帖子总结(Range的使用)

先说说TextRange 的常用方法

collapse([bStart])
移动Range的插入点
bStart true(移到开头) false(移到末尾)

findText(sText [, iSearchScope]  [, iFlags])
在Range中查找sText
iSearchScope 开始位置,负数方向搜索
iFlags 2(整词匹配)    4(区别大小写)

moveStart(sUnit [, iCount])
moveEnd(sUnit [, iCount])
移动Range的开头或结尾
sUnit character(字) word(词) sentence(句) textedit(Range)
iCount 移动数量,默认为1

moveToPoint(iX, iY)
移动光标到坐标(iX,iY)

pasteHTML(sHTMLText)
替换Range中的html

scrollIntoView([bAlignToTop])
滚动使之在当前窗口显示
bAlignToTop true(Range在窗口开头) false(Range在窗口底部)

select()
选中Range

然后讲一些例子,大家也可以帮忙汇总一下,找帖子不好找,呵呵 
设置光标(qiushuiwuhen)

关于光标定位的补充.abcdefghijklmnopqrstuvwxyz

倒数 第位

function setCursor(){
var num=parseInt(document.all.s.value)
range=document.all.demo.createTextRange();
if(document.all.collapse.checked){
range.collapse(false);
range.moveEnd('character',-1*num);
}else{
range.collapse(true);
range.moveStart('character',-1+num);
}
range.select();
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

设置文本选择(qiushuiwuhen)

关于光标定位的补充.abcdefghijklmnopqrstuvwxyz

从正数 到 倒数第位

function setSelect(){var range = document.body.createTextRange();
range.moveToElementText(demo)
range.moveEnd('character',-1*parseInt(document.all.s.value));
range.moveStart('character',-1+parseInt(document.all.b.value));
range.select();
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

取得当前坐标系列1

先将光标置在这里任意处,然后点击按钮,看光标变化

function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
show.focus();
document.execCommand('paste');
var arr=show.value.split(s);
show.value=arr[1];
show.document.selection.empty();
show.document.selection.createRange().select();
show.focus();
clipboardData.setData('text',arr[0]);
document.execCommand('paste');
return arr[0].length;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

取得当前坐标系列2

北京时间10月6日,世界三大通讯社之一的法新社刊发图文报道,中国国脚孙继海因为在最近的世界杯预选赛中的表现,已经吸引了意大利俱乐部AC米兰和都灵队的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图片。

function getCursorPosition(){
var src = event.srcElement
var oTR = src.createTextRange()
var textLength = src.innerText.length
var line, char, total, cl
oTR.moveToPoint(window.event.x, window.event.y)
oTR.moveStart("character", -1*textLength)
cl = oTR.getClientRects()
line = cl.length
total = oTR.text.length
oTR.moveToPoint(cl[cl.length-1].left-2, cl[cl.length-1].top-2)
oTR.moveStart("character", -1*textLength)
char = total - oTR.text.length
window.status = "行: " + line +", 列: " + char + ", 第 " + total + " 个字符"
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

取得当前坐标系列3(Yang)

Alpha 滤镜 : 线形

Alpha 滤镜 :放射状

Alpha 滤镜 :长方形

样式表滤镜实例

function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
oTextArea.focus();
document.execCommand('paste');
var ret=oTextArea.value.indexOf(s);
document.execCommand('undo');
return ret;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 光标的帖子总结(Range的使用)

    先说说TextRange 的常用方法 collapse([bStart]) 移动Range的插入点 bStart true(移到开头) false(移到末尾) findText(sText [, iSearchScope]  [, iFlags]) 在Range中查找sText iSearchScope 开始位置,负数方向搜索 iFlags 2(整词匹配)    4(区别大小写) moveStart(sUnit [, iCount]) moveEnd(sUnit [, iCount]) 移动Ra

  • Vue中div contenteditable 的光标定位方法

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob

  • Html 编辑器粘贴内容过滤技术详解

    作者:Tony Qu 最近在解决数据粘贴方面取得了不少进展,作为Html在线编辑器所必须具备的技术,在这里详细给大家介绍并提供实现参考.在研究过程中,我也确实走了不少弯路,尝试了n种方式,由于美国的PM始终觉得有些影响用户体验的东西无法接受,导致好几个提案被否定,不过收获还是很丰富的. 我现在写code喜欢需求驱动,让我们来看看这项技术的主要需求 * 能够过滤用户贴进来的纯文本数据 * 能够过滤用户贴进来的html数据(未经Html编码) * 能够过滤用户贴进来的Word数据,并能把大部分Wor

  • 比较全的一个C#操作word文档示例

    最近两天研究了一下如何使用VS2008(C#语言)输出Word文档.以下是几点总结: 1.非常简单. 2.开发及运行环境要求.操作系统为:WindowsXP(安装.net framework2.0)/Vista/Win7:在操作系统必须安装Word2003完全安装版.这里必须要强调是Word2003完全安装版,因为软件开发及运行都需要一个com组件:Microsoft word 11.0 Object Library.如果不是Word2003完全安装版,可以下载这个com组件,并手动的安装这个c

  • jQuery实现简单的日期输入格式化控件

    js代码有一百多行. 先上效果图  html代码 日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期"> 设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件. js代码 这里应用了jQuery的库, 主要用于选择元素和绑定事件. 复制代码 代码如下: <sc

  • js TextArea的选中区域处理

    (一)获取Textarea的选中区域起点或无选中时的输入光标位置 非IE浏览器,如,firefox,chrome,支持 selectionStart 获取选中区域的起点,而IE浏览器不支持该属性,需要间接通过TextRange来获得,利用TextRange对象的compareEndPoints方法来进行起点的比较可以实现. 复制代码 代码如下: getStartPos : function( textarea ) { if ( typeof textarea.selectionStart !=

  • 如何通过Vue实现@人的功能

    本文采用vue,同时增加鼠标点击事件和一些页面小优化 基本结构 新建一个sandBox.vue文件编写功能的基本结构 <div class="content"> <!--文本框--> <div class="editor" ref="divRef" contenteditable @keyup="handkeKeyUp" @keydown="handleKeyDown" >

  • Vue实现输入框@功能的示例代码

    目录 前言 成员列表 创建 使用 输入框 获取光标的坐标 保存光标 插入文本 运行结果 总结 前言 前几篇文章中分别介绍了如何实现聊天输入框的双向绑定.回车键发送.粘贴文本图片等功能,本着完善输入框的目的,文本重点介绍聊天框如何实现@功能. 文章回顾: Vue实现contenteditable元素双向绑定的方法详解 Vue实现输入框回车发送和粘贴文本与图片功能 首先需要先理清思路: 成员列表组件,需要根据光标的位置调整,点击成员项时回调成员信息 获取光标的位置坐标(x值,y值) 输入框失焦时记录

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • 百度编辑器 如何获取光标位置与不同帧内的节点

    var range = editor.selection.getRange();var td = domUtils.findParentByTagName( range.startContainer, 'td', true ); 当我们console.log(domUtils)的时候,可以在控制台中,看见很多domUtils下的方法,这些方法都是用于操作节点的,findParentByTagName()顾名思义,获取的是节点,当我们的光标在编辑器内容处,而我们要获取相应内容外层节点的id以及各种

随机推荐