JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<form action="" name="chat">
	<textarea name="message" class="field" data-action="paste">На вставку текста вешаю событие и обрабатываю полученный текст, но как его потом вставить?</textarea>
	<ul class="smile-list">
		<li class="smile-item" data-action="smile" data-content="^)">Улибка</li>
		<li class="smile-item" data-action="smile" data-content=":\">Датыч0?</li>
	</ul>
</form>

CSS

.field,
.smile-list{
	vertical-align:top;
}
.field{
	width:300px;
	height:100px;
	padding:20px;
	height:200px;
	border:4px solid #369;
	border-radius:4px;
	font-size:1.5em;
}
.smile-list{
	list-style:none;
	display:inline-block;
	margin:20px 0 0 20px;
	padding:0;
}
.smile-item{
	margin:0 0 5px;
	padding:5px 10px;
	border-radius:4px;
	background:#f0f0f0;
	cursor:default;
}
.smile-item:hover{
	color:#fff;
	background:#69c;
}

JavaScript

$(function () {
	var target = document.chat.message;

	$(document).on('click', '[data-action="smile"]', function (e) {
		var content = $(this).data('content');

		insert(content);
	});

	function insert (text) {
		target.focus();

		if (target.selectionStart) {
			var start = target.selectionStart;

			target.value = target.value.slice(0, start) + text + target.value.slice(target.selectionEnd);
			target.selectionStart = target.selectionEnd = start + text.length;
		} else {
			var range = document.selection.createRange();

			range.text = text;
			range.collapse(false);
			range.select();
		}
	}
});