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

最新推荐文章于 2022-06-01 17:57:09 发布

weixin_34050389

最新推荐文章于 2022-06-01 17:57:09 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jkko123/p/9264418.html

本文介绍了一个实用的jQuery插件，可在textarea光标位置插入文本或表情，适用于聊天应用等场景。提供了完整的代码示例及使用说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些时候我们已经在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>

显示如下：