前端在textarea文本域中光标插入指定内容

前端在textarea文本域中光标插入内容，直接看图说话！

注：这是jQuery写法，需要引入jQuery.js

<div class="DetailsCom_main_text boxEditSms" style="position: relative;">
	<p class="p_name">模板内容</p>
	<div class="rig_ipt" >
		<textarea name="templateMain"  class="message_area"  placeholder="请输入模板内容">尊敬的{姓名}，{活动名称}与您相约深圳福田会展中心，参观报名点击{报名链接}，填写报名信息，恭候您的光临！</textarea>
	</div>
	<div class="quicksWrap">
		点击
		<span class="quicks">
			<iclass="name ">姓名</i><i>活动名称</i><i class="link ">报名链接</i>
		</span>
		可在通知中插入{姓名}、{报名链接}等信息，发送时将用实际数据替换
	</div>
</div>

插入固定字段

$(function () {
    var $txtEditSms = $('.boxEditSms textarea'); //获取节点
	$('.boxEditSms .quicks i').click(function () { //重点 插入固定字段
		var text = $(this).text();
		var insert = '';
		var markL = '{';
		var markR = '}';
		switch (text) {
			case '活动名称':
				insert = '测试活动名称';
				break;
			case '姓名':
			case '报名链接':
				insert = markL + text + markR;
				break;
			default:
		}
		$txtEditSms.insertAtCaret(insert);
		$(this).addClass('active');
		$txtEditSms.trigger('input');
	});
})

注：千万别忘了，还需要引入js

//将内容插入到光标处
(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);