<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="popover-content">
<ul class="list-inline emote_list">
<li data-key="1f60a" class="emote_item"><img alt="" src="/static/img/emoteicon/1f60a.png"></li>
<li data-key="1f60d" class="emote_item"><img alt="" src="/static/img/emoteicon/1f60d.png"></li>
<li data-key="1f618" class="emote_item"><img alt="" src="/static/img/emoteicon/1f618.png"></li>
<li data-key="1f633" class="emote_item"><img alt="" src="/static/img/emoteicon/1f633.png"></li>
</ul>
</div>
<textarea placeholder="" class="form-control" id="input_textarea" style="100%; height:100px; border:1px solid red"></textarea>
<button class="btn btn-primary" type="button" id="btn_send">发送</button>
</body>
</html>
<script src="jquery.min.js"></script>
<script type="text/javascript">
// 获取光标位置函数
function getCursortPosition(ctrl) {
var CaretPos = 0;
if (document.selection) { // IE Support
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
} else if (ctrl.selectionStart || ctrl.selectionStart == '0') { // Firefox support
CaretPos = ctrl.selectionStart;
}
return (CaretPos);
}
$(document).ready(function() {
$('.emote_item').on('click', function() {
var k = $(this).data('key'),
input = $('#input_textarea');
pos = getCursortPosition(input[0]);
s = input.val();
var v = s.substring(0, pos) + '[e]' + k + '[/e]' + s.substring(pos);
input.val(v);
input.focus();
});
});
</script>
//第二种插入光标处的插件
//插入光标处的插件
$.fn.extend({
insertContent : function(myValue, t) {
var $t = $(this)[0];
if (document.selection) {
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
sel.moveStart('character', -l);
var wee = sel.text.length;
if (arguments.length == 2) {
var l = $t.value.length;
sel.moveEnd("character", wee + t);
t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);
sel.select();
}
} 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;
if (arguments.length == 2) {
$t.setSelectionRange(startPos - t,$t.selectionEnd + t);
this.focus();
}
} else {
this.value += myValue;
this.focus();
}
var val = $(this).val(),
that = $(this),
box = that.parent().prev('.dynamic_info').find('.right');
if(val.length > 140){
that.val(val.substring(0, 140));
box.html('您还可以输入0字');
return false;
}else{
box.html('您还可以输入' + (140 - val.length) + '字');
}
}
})
//插入光标处的插件end
//使用方法：
//当前文本框
var obj = that.parents('.face_content_item').prev('.face_textarea_item').find('.contents');
//点击表情插入文本框
$('.jsSmilies li').click(function() {
var _text = $(this).data('action');
obj.focus();
obj.insertContent(_text);
$(this).parents('#xuebox_smilies').hide();
})