JavaScript中在光标处插入添加文本标签节点的详细方法

正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。

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

var sel = win.document.selection; //IE
var sel = win.getSelection(); //DOM
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”){
 cnodecnode = cnode.parentNode;
 }
 if(cnode.id && cnode.id==”rich_txt_editor”){
 range.pasteHTML(",:),");
 }
}
win.focus();

innerHTML 和 pasteHTML 区别

innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它

pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上

var oRange = document.selection.createRange();
 if(oRange.text!=''){
 var oHtml = '<a href="#" rel="external nofollow" target=_blank>oRange.text</a>';
 oRange.pasteHTML(oHtml);
 } 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2017-03-20

Javascript实现获取及设置光标位置的方法

本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE

js获取光标位置和设置文本框光标位置示例代码

复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

javascript textarea光标定位方法(兼容IE和FF)

今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

js实现获取焦点后光标在字符串后

主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下

js/html光标定位的实现代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

JavaScript自定义文本框光标

文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光标.以下是笔者个人的想法. [************************基本思路***************************] 对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow).右箭头(right arrow)和退格键(backspace). 左箭

在页面中js获取光标/鼠标的坐标及光标的像素坐标

近期为网站开发页面统计,以前虽然也开发过,但是功能不是很全,所以这次把一些好功能给用上. 例如这次的,页面JS光标/鼠标坐标,你也许问着有什么用,百度统计中有个热点统计图,这下清楚明白了吧. 好了,上肉: 功能:获取光标的像素坐标 复制代码 代码如下: <html> <head> <script type="text/javascript"> function showPosition(e){ var x,y; var e = e||window.e

js切换光标示例代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js切换光标<

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

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

js光标定位文本框回车表单提交问题的解决方法

本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

layui 解决富文本框form表单提交为空的问题

layui 解决富文本框form表单提交为空的问题 一直获取不到form data 这样子就可以正常提交了 以上这篇layui 解决富文本框form表单提交为空的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

php表单提交问题的解决方法

在此记录一下,以后不能在同一个地方摔倒了! 数据库为bbs,表为test.三个字段,分别为id,name,sex.id为auto_increment. 连接数据库的php文件conn.php内容为 复制代码 代码如下: $conn = @ mysql_connect("localhost", "root", "") or die("数据库链接错误"); mysql_select_db("bbs", $con

基于JavaScript实现带数据验证和复选框的表单提交

实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q

ArtEditor富文本编辑器增加表单提交功能

摘要: artEditor.js是一款移动端的富文本编辑器,支持图片上传,后面会增加表情.小视频等功能.最近有朋友反馈artEditor是否支持表单提交,当然是支持的,在未开发该功能之前,你可以像下面这样来实现表单提交 $('.submit').on('click', function(e) { e.preventDefault(); $('.hidden').val($('#artEditor').getValue()); $(this).submit(); }); 新功能: 新增formIn

ThinkPHP下表单令牌错误与解决方法分析

本文实例讲述了ThinkPHP下表单令牌错误与解决方法.分享给大家供大家参考,具体如下: 在项目的开发过程中,添加.编辑数据时偶尔会遇到系统提示的"表单令牌错误",一开始没怎么在意,直到今天下午QA把此问题提到bug系统了,正好时间也有空余,就追着TP3.13的源码看了下去,几分钟后,便知道原委了. 在项目中开启表单令牌,通常要在配置文件中做如下配置 // 是否开启令牌验证 'TOKEN_ON' => true, // 令牌验证的表单隐藏字段名称 'TOKEN_NAME' =&g

jQuery实现表单提交时判断的方法

本文实例讲述了jQuery实现表单提交时判断的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <input type="submit" id="myBtn" /> 换成: 复制代码 代码如下: <input type="button" id="myBtn" /> 使用: 复制代码 代码如下: $("#myBtn").click(function(){    ..

利用JavaScript阻止表单提交的两种方法

在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

layui的面包屑或者表单不显示的解决方法

如下所示: 页面上显示空白   是因为加了hidden:让我们去查查官方文档 官方是这样描述的 当你使用表单时,Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果.Tab选项卡等同理(它们需依赖 element 模块) layui.use('element', function(){ var element = layui.element; //导

layer关闭弹出窗口触发表单提交问题的处理方法

1.前言 表单的代码: <form> 此处理代码略... <div id="footer"> <button class="btn btn-success" name="save" type="submit" title="保存">保存</button> <button class="btn btn-success" id="