webmechanicx · January 26, 2016 01:31
diff --git a/insertCaret.html b/insertCaret.html
 <!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" lang="en" xml:lang="en">
 <head>
 <title>jQuery Examples for insertAtCaret</title>
 <style type="text/css" media="Screen">
 #maincontainer {
 	width: 960px;
 	margin: 0 auto;
 }

 #contentwrapper {
 	float: left;
 	width: 100%;
 }

 #maincolumn {
 	margin-top: 12px;
 	margin-left: 200px;
 }

 .text {
 	margin: 0 0 15px 15px;
 }

 #leftcolumn {
 	margin-top: 15px;
 	float: left;
 	width: 200px;
 	margin-left: -960px;
 }

 * html #leftcolumn { margin-top: 13px; }
 * html #maincolumn { margin-top: 10px; }

 /**************************************************
 					Messages
 **************************************************/
 .error {
 	background:#ffe1da url('http://skfox.com/jqExamples/images/icon_error.jpg') 13px 50% no-repeat;
 	border:2px solid #f34f4f;
 	color:#be0b0b;
 	padding:10px 11px 8px 36px;
 	margin: 15px 40px 15px 20px;
 }
 .information {
 	background:#dedfff url('http://skfox.com/jqExamples/images/icon_information.jpg') 13px 50% no-repeat;
 	border:2px solid #9bb8d9;
 	color:#406299;
 	padding:10px 11px 8px 38px;
 	margin: 15px 40px 15px 20px;
 }
 .success {
 	background:#e2f9e3 url('http://skfox.com/jqExamples/images/icon_success.jpg') 13px 50% no-repeat;
 	border:2px solid #9c9;
 	color:#080;
 	padding:10px 11px 8px 38px;
 	margin: 15px 40px 15px 20px;
 }
 .warning {
 	background:#fff8bf url('http://skfox.com/jqExamples/images/icon_warning.jpg') 13px 50% no-repeat;
 	border:2px solid #ffd324;
 	color:#eb830c;
 	padding:10px 11px 8px 38px;
 	margin: 15px 40px 15px 20px;
 }
 </style>
 <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
 <script language="JavaScript" type="text/javascript">
 $(document).ready( function() 
 {
 	$('#ClickWordList li').click(function() { 
 		$("#txtMessage").insertAtCaret($(this).text());
 		return false
 	});
 	$("#DragWordList li").draggable({helper: 'clone'});
 	$(".txtDropTarget").droppable({
 		accept: "#DragWordList li",
 		drop: function(ev, ui) {
 			$(this).insertAtCaret(ui.draggable.text());
 		}
 	});
 });

 $.fn.insertAtCaret = function (myValue) {
 	return this.each(function(){
 			//IE support
 			if (document.selection) {
 					this.focus();
 					sel = document.selection.createRange();
 					sel.text = myValue;
 					this.focus();
 			}
 			//MOZILLA / NETSCAPE support
 			else if (this.selectionStart || this.selectionStart == '0') {
 					var startPos = this.selectionStart;
 					var endPos = this.selectionEnd;
 					var scrollTop = this.scrollTop;
 					this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
 					this.focus();
 					this.selectionStart = startPos + myValue.length;
 					this.selectionEnd = startPos + myValue.length;
 					this.scrollTop = scrollTop;
 			} else {
 					this.value += myValue;
 					this.focus();
 			}
 	});
 };
 </script>
 <style type="text/css" media="Screen">
 	#leftcolumn li{cursor:pointer;}
 </style>
 </head>
 <body>
 <div id="maincontainer">
  <div id="headline1">
    <span class="subtitle">Insert at caret</span> </div>
  <div id="contentwrapper">
    <div id="maincolumn">
      <div class="text">
        <h2>Message #1</h2>
        <textarea name="txtMessage" id="txtMessage" class="txtDropTarget" cols="80" rows="15"></textarea>
        <h2>Message #2</h2>
        <textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget" cols="80" rows="15"></textarea>		
      </div>
    </div>
  </div>
  <div id="leftcolumn">
    <fieldset>
    <legend>Click to insert:</legend>
    <ul id="ClickWordList">
      <li>Hello world!</li>
      <li>All your base</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
    </fieldset>
    <fieldset>
    <legend>Drag to insert:</legend>
    <ul id="DragWordList">
      <li>Hello world!</li>
      <li>All your base</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
    </fieldset>
  </div>
 </div>
 </body>
 </html>
	<!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" lang="en" xml:lang="en">
	<head>
	<title>jQuery Examples for insertAtCaret</title>
	<style type="text/css" media="Screen">
	#maincontainer {
	width: 960px;
	margin: 0 auto;
	}

	#contentwrapper {
	float: left;
	width: 100%;
	}

	#maincolumn {
	margin-top: 12px;
	margin-left: 200px;
	}

	.text {
	margin: 0 0 15px 15px;
	}

	#leftcolumn {
	margin-top: 15px;
	float: left;
	width: 200px;
	margin-left: -960px;
	}

	* html #leftcolumn { margin-top: 13px; }
	* html #maincolumn { margin-top: 10px; }

	/**************************************************
	Messages
	**************************************************/
	.error {
	background:#ffe1da url('http://skfox.com/jqExamples/images/icon_error.jpg') 13px 50% no-repeat;
	border:2px solid #f34f4f;
	color:#be0b0b;
	padding:10px 11px 8px 36px;
	margin: 15px 40px 15px 20px;
	}
	.information {
	background:#dedfff url('http://skfox.com/jqExamples/images/icon_information.jpg') 13px 50% no-repeat;
	border:2px solid #9bb8d9;
	color:#406299;
	padding:10px 11px 8px 38px;
	margin: 15px 40px 15px 20px;
	}
	.success {
	background:#e2f9e3 url('http://skfox.com/jqExamples/images/icon_success.jpg') 13px 50% no-repeat;
	border:2px solid #9c9;
	color:#080;
	padding:10px 11px 8px 38px;
	margin: 15px 40px 15px 20px;
	}
	.warning {
	background:#fff8bf url('http://skfox.com/jqExamples/images/icon_warning.jpg') 13px 50% no-repeat;
	border:2px solid #ffd324;
	color:#eb830c;
	padding:10px 11px 8px 38px;
	margin: 15px 40px 15px 20px;
	}
	</style>
	<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
	<script language="JavaScript" type="text/javascript">
	$(document).ready( function()
	{
	$('#ClickWordList li').click(function() {
	$("#txtMessage").insertAtCaret($(this).text());
	return false
	});
	$("#DragWordList li").draggable({helper: 'clone'});
	$(".txtDropTarget").droppable({
	accept: "#DragWordList li",
	drop: function(ev, ui) {
	$(this).insertAtCaret(ui.draggable.text());
	}
	});
	});

	$.fn.insertAtCaret = function (myValue) {
	return this.each(function(){
	//IE support
	if (document.selection) {
	this.focus();
	sel = document.selection.createRange();
	sel.text = myValue;
	this.focus();
	}
	//MOZILLA / NETSCAPE support
	else if (this.selectionStart \|\| this.selectionStart == '0') {
	var startPos = this.selectionStart;
	var endPos = this.selectionEnd;
	var scrollTop = this.scrollTop;
	this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
	this.focus();
	this.selectionStart = startPos + myValue.length;
	this.selectionEnd = startPos + myValue.length;
	this.scrollTop = scrollTop;
	} else {
	this.value += myValue;
	this.focus();
	}
	});
	};
	</script>
	<style type="text/css" media="Screen">
	#leftcolumn li{cursor:pointer;}
	</style>
	</head>
	<body>
	<div id="maincontainer">
	<div id="headline1">
	<span class="subtitle">Insert at caret</span> </div>
	<div id="contentwrapper">
	<div id="maincolumn">
	<div class="text">
	<h2>Message #1</h2>
	<textarea name="txtMessage" id="txtMessage" class="txtDropTarget" cols="80" rows="15"></textarea>
	<h2>Message #2</h2>
	<textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget" cols="80" rows="15"></textarea>
	</div>
	</div>
	</div>
	<div id="leftcolumn">
	<fieldset>
	<legend>Click to insert:</legend>
	<ul id="ClickWordList">
	<li>Hello world!</li>
	<li>All your base</li>
	<li>Lorem ipsum dolor sit amet...</li>
	</ul>
	</fieldset>
	<fieldset>
	<legend>Drag to insert:</legend>
	<ul id="DragWordList">
	<li>Hello world!</li>
	<li>All your base</li>
	<li>Lorem ipsum dolor sit amet...</li>
	</ul>
	</fieldset>
	</div>
	</div>
	</body>
	</html>