`
sgwood
  • 浏览: 120653 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

在光标处插入正解

阅读更多
之前在网上也找过类似的资料,国内网站介绍的都是老掉牙的方法不兼容标准浏览器。正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。

思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。

实现:IE下的Selection对象,var sel = win.document.selection;
DOM方式的Selection对象,var sel = win.getSelection();

var range = sel.createRange(); //IE下
var range = sel.getRangeAt(0); //DOM下


if(range.startContainer){ //DOM下

sel.removeAllRanges(); //删除Selection中的所有Range
range.deleteContents(); //清除Range中的内容

//获得Range中的第一个html结点
var container = range.startContainer;
//获得Range起点的位移
var pos = range.startOffset;

//建一个空Range
range = document.createRange();

//插入内容
var cons = win.document.createTextNode(",:),");


if(container.nodeType == 3){//如是一个TextNode
container.insertData(pos, cons.nodeValue);

//改变光标位置
range.setEnd(container, pos + cons.nodeValue.length);
range.setStart(container, pos + cons.nodeValue.length);

}else{//如果是一个HTML Node
var afternode = container.childNodes[pos];

container.insertBefore(cons, afternode);

range.setEnd(cons, cons.nodeValue.length);
range.setStart(cons, cons.nodeValue.length);
}

sel.addRange(range);

}
else{//IE下
var cnode = range.parentElement();
while(cnode.tagName.toLowerCase() != "body"){
cnode = cnode.parentNode;
}
if(cnode.id && cnode.id=="rich_txt_editor"){
range.pasteHTML(",:),");
}
}

win.focus();

[DEMO] http://listenpro.googlepages.com/editor_demo_insert.html

转载:http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1&p=55#comments
分享到:
评论

相关推荐

    插入鼠标后会自动禁用触摸板

    在标签“禁用触摸板”中,我们可以理解这个操作的主要目的是提高工作效率,特别是在需要精细操作或者长时间使用鼠标时,避免意外触碰触摸板导致光标移动。此外,对于那些不习惯或者不喜欢使用触摸板的用户来说,这也...

    PowerPoint 2010演示文稿制作_编辑演示文稿对象_插入表格.pdf

    在PowerPoint 2010中,插入表格是一项重要的功能,可以帮助用户组织信息,呈现数据。以下是关于在PowerPoint 2010中插入表格的详细步骤和方法: 1. **快速插入表格**: - 用户可以选择直接通过【插入】选项卡下的...

    vim-togglecursor:在终端中切换Vim的光标形状

    该插件旨在提供在支持它的终端上进入Vim的插入模式时更改光标的功能。 当前,仅限于iTerm,Konsole和xterm的部分支持(默认情况下,创建下划线光标而不是行)。 安装 解压缩到~/.vim (或Windows上的%USERPROFILE%\...

    Windows开机密码破解参考.pdf

    使用带启动的光盘或U盘,重启计算机,按F2键,进入高级模式,改变启动项,选择插入的设备启动。然后,选择破解Windows登录密码,选择密码所在的分区,输入对应的数字,按Enter键,输入要取消的密码的序号,按Enter键...

    破解ACCESSKEY

    在步骤6后,你就可以修改程序"LSKEYF00"了,找到“CALL 'GET_DEVELOPER_KEY' ID 'NAME' FIELD 'ABCDEFGHIJKL'”并将光标置于其下面一行,点击STOP按钮右边的“插入”按钮,在光标处将出现*{ INSERT REQUEST IA &$&$&...

    abap破解访问关键字

    在这个步骤中,我们需要找到之前添加断点的地方,CALL 'GET_DEVELOPER_KEY' ID 'NAME' FIELD 'ABCDEFGHIJKL' ID 'CUSTID' FIELD '1234567890' ID 'KEY' FIELD DUMMY_KEY,然后将光标放在 dummy_key 后面,点击插入...

    .net使用Aspose.Words进行Word替换操作的实例

    之前在工作中,需要实现Word打印功能,并且插入图片。当时采取的方式则是使用书签进行操作。首先在word内插入书签,完成后,存为模板。...此时,图片的插入就存在问题,光标无法直接移动到指定字符串。

    优秀代码编辑器 Sublime Text 3.2.2 Build 3211 + x64 中文注册版.zip

    Ctrl+Shift+D 复制光标所在整行,插入在该行之前 ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找 Ctrl+Shift+K 删除整行 Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可...

    unix下的vi入门命令集锦

    - `i`:在光标前插入。 - `I`:在当前行首非空白字符前插入。 - `o`:在下方新开一行并进入输入模式。 - `O`:在上方新开一行并进入输入模式。 - 退出vi: - `:q`:无修改退出,如果文件有修改,vi会阻止退出...

    Sublime Text3_64.rar

    Ctrl+Shift+D 复制光标所在整行,插入在该行之前 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+KU 改为大写 Ctrl+KL 改为小写 Ctrl+D 选词 (按住-继续选择下个相同的字符串) Ctrl+M 光标移动至括号内开始或...

    Atom-atom-gist,创建并插入gist。贡献给AKI77/原子.zip

    为了使用 Atom-atom-gist 插件,你需要先解压缩 "atom-gist-master" 文件,然后在 Atom 中安装。安装完成后,可以通过快捷键或者在命令面板(Command Palette)中搜索 "Atom Gist" 相关命令来启动插件功能。记得在...

    Sublime Text2.1 可添加windows8

    Ctrl+Shift+D 复制光标所在整行,插入在该行之前 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+KU 改为大写 Ctrl+KL 改为小写 Ctrl+D 选词 (按住-继续选择下个相同的字符串) Ctrl+M 光标移动至括号内开始或结束...

    synaptics触控板公版驱动_12.2.11 带自动插入外置鼠标,自动屏蔽触摸板的功能

    这款驱动特别之处在于它包含了自动插入外置鼠标时自动屏蔽触摸板的功能。这一特性对于许多用户来说非常实用,因为在使用鼠标时,他们可能不希望无意间触碰触控板导致光标移动,从而影响操作的精确性。该驱动程序的这...

    linux各种使用命令

    - 在Vim中,`d`用于删除行,按`dd`删除当前行,按住`d`可连续删除,`x`删除当前光标处字符,`i`在当前光标前插入,`a`在当前光标后插入,`o`在当前行下方插入新行,`O`在当前行上方插入。 6. **数据库操作**: - ...

    NOI2003试题day1

    - `INSERT(n, s)`:在光标后插入长度为n的字符串s,光标位置保持不变。 - `DELETE(n)`:删除光标后的n个字符,光标位置保持不变。 - `GET(n)`:输出光标后的n个字符,光标位置保持不变。 - `PREV()`:光标前移一...

    linux常用命令

    - **输入模式**: 用户可以在当前光标位置输入文本。从指令模式切换到输入模式的方法包括使用`a`、`A`、`i`、`I`、`o`、`O`等指令。 - 使用`ESC`键可以从输入模式返回到指令模式。 - **退出Vi** - 在指令模式下...

Global site tag (gtag.js) - Google Analytics