webmechanicx/insertCaret.html

## 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>