网页实现表情

1.准备好表情图片

2.把表情全部按顺序命名，例如：

4.把图片表情全部放在一个文件夹，然后拷贝到项目中。

5.在页面生成表情预览，用于点击输入：

预览布局可自己编写，表情生成代码如下：

			//生成表情
			function loadEmoji() {
				$(".emoji").html('');
				var html = '';
				for(var i = 1; i <= 105; i++) {
					html += '<img class="emoji-img" src="emoji2/' + i + '.png" οnclick="choiceEmoji(' + i + ')" />';
					if((i % 5) == 0) {}
				}
				$(".emoji").html(html);
			}

			//选择表情
			function choiceEmoji(index) {
				var msg = $("#msg-text").val();
				var emoji = '[em_' + index + ']';
				msg = msg + emoji;
				$(".emoji").hide();//隐藏表情选择
				$("#msg-text").val(msg);//赋值
				$("#msg-text").focus();//输入框获取焦点
				moveEnd($("#msg-text").get(0)); //移动光标至末尾，且切换selection的位置
			}

			//光标移至文本后面
			function moveEnd(obj) {
				obj.focus();
				var len = obj.value.length;
				if(document.selection) {
					var sel = obj.createTextRange();
					sel.moveStart('character', len); //设置开头的位置
					sel.collapse();
					sel.select();
				} else if(typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
					obj.selectionStart = obj.selectionEnd = len;
				}
			}

6.把带有表情的内容进行转换即可

参考代码：

			//字符替换为表情
			function replace_em(str) {
				str = str.replace(/\</g, '<');
				str = str.replace(/\>/g, '>');
				str = str.replace(/\n/g, '<br/>');
				str = str.replace(/\[em_([0-9]*)\]/g, '<img class="emoji-size" src="emoji2/$1.png" border="0" />');
				return str;
			}

完了！