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

Posted jkko123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在textarea中鼠标指定的位置插入字符或表情相关的知识，希望对你有一定的参考价值。

有些时候我们已经在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中鼠标指定的位置插入字符或表情的主要内容，如果未能解决你的问题，请参考以下文章

在 Angular 中的 TextArea 内的当前（或最后一个）插入符号位置插入文本；元素不被解释为 TextArea

sed 怎样在文本里指定位置插入字符

JavaScript：通过鼠标单击获取输入文本位置（以字符为单位）

如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标？

那个向下的箭头符号怎么打！

点击时文本区域的表情符号