jQuery插件,将内容插入到光标处

(function ($) {
	$.fn.extend({
		insertAtCaret : function (myValue) {
			var $t = $(this)[0];
			if (document.selection) {
				this.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
				this.focus();
			} else
				if ($t.selectionStart || $t.selectionStart == ‘0‘) {
					var startPos = $t.selectionStart;
					var endPos = $t.selectionEnd;
					var scrollTop = $t.scrollTop;
					$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
					this.focus();
					$t.selectionStart = startPos + myValue.length;
					$t.selectionEnd = startPos + myValue.length;
					$t.scrollTop = scrollTop;
				} else {
					this.value += myValue;
					this.focus();
				}
		}
	})
})(jQuery);

//调用方法:$("select").insertAtCaret();
时间: 2024-10-08 11:38:20

jQuery插件,将内容插入到光标处的相关文章

我的第三个jquery插件——promptForK13内容提示插件

jQuery提示插件,默认css样式使用了css3属性,所以最好在火狐或谷歌等标准浏览器下浏览.可自定义提示框结构及样式. 下载 可设参数: "addID": "", //追加ID,方便自定义控制    "addClass": "", //追加class,方便自定义控制    "dom": "", //自定义dom结构                //最外面的元素必须以.prompt_

50个jQuery插件可将你的网站带到另一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)

js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update    2015-10-25 **********************************************/ $.fn.extend({      insertContent : function(myValue, t) {          var that = $(this);        v

使用JS在textarea在光标处插入内容

// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //MOZILLA/NETSCAPE support

在光标处插入内容。

function insertAtCursor(myField, myValue) { if (document.selection) { //IE myField.focus(); var sel = document.selection.createRange(); //创造range对象 sel.text = myValue; //由于我们选择的RANGE对象长度就是光标,直接赋插入值即可 }else if (myField.selectionStart || myField.select

可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

JQ在光标处插入文字

内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":function(value){ //默认参数 value=$.extend({ "text":"123" },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){

由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器

转载请注明: TheViper http://www.cnblogs.com/TheViper  大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的.当然,如果要严谨的,用像ueditor那种只有很少部分实现是用execCommand的富文本编辑器. 昨天,本屌就试着用execCommand搞一个简单的编辑器.在本屌看来,什么字体加粗,斜体,下划线,对齐,列表..直接用execCo

解决从光标处插入图片光标消失的问题

最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行. 此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便后续学习使用. 1. TheViper,说的很详细 http://www.cnblogs.com/TheViper/p/4303158.html 2.这块说的一幕了然  http://w3cboy.com/post/2015/06/iframe-insert-picture-cursor/ 以上代码