码迷,mamicode.com
首页 > 其他好文 > 详细

在textarea中鼠标指定的位置插入字符或表情

时间:2018-07-04 18:53:14      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:.text   lse   end   DPoS   表情   3.1   doctype   bootstrap   else   

有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到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);

我们写个小页面,测试一下该插件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col col-sm-12">
					<button class="btn btn-danger" data-param="{$buyer}">买家</button>
					<button class="btn btn-danger" data-param="{$address}">地址</button>
				</div>
				<div class="col col-sm-12">
					<textarea class="form-control" id="content" rows="10"></textarea>
				</div>
			</div>
		</div>
	
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script>
		(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);
			
		$("button").on("click", function() {
			$("#content").insertAtCaret($(this).attr("data-param"));
		});
		</script>
	</body>
</html>

显示如下:

技术分享图片

在textarea中鼠标指定的位置插入字符或表情

标签:.text   lse   end   DPoS   表情   3.1   doctype   bootstrap   else   

原文地址:https://www.cnblogs.com/jkko123/p/9264418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!