html5输入框表情,H5页面input输入框含有键盘自带的表情符时显示异常

在做一个关于新闻的评论功能的H5页面时，需求里面要求能够发送表情显示表情，如果使用自定义的表情库，则在评论也还要加载大量的表情符图片，极大的影响加载速度，消耗流量，去看了下别的新闻网页版的评论部分也没有使用外带的表情库。

在input输入框里面添加上键盘自带表情符后，发送给后台服务器会显示服务异常，上网找了下解决办法，表情编码是16进制的，而我们用的是8进制的于是报错。将表情符转码成就能够ok。代码如下：

function utf16toEntities(str) {

var patt=/[\ud800-\udbff][\udc00-\udfff]/g;

// 检测utf16字符正则

str = str.replace(patt, function(char){

var H, L, code;

if (char.length===2) {

H = char.charCodeAt(0);

// 取出高位

L = char.charCodeAt(1);

// 取出低位

code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00;

// 转换算法

return "" + code + ";";

} else {

return char;

}

});

return str;

}

这样就解决了存储问题。

要想成功展示表情符还得转回来。不幸的是搜索到的解决方案里面只有上面一段转码的代码，只能自己动手。于是就照着这个进行了反转

//表情解码

function entitiestoUtf16(str){

// 检测出形如〹形式的字符串

var strObj=utf16toEntities(str);

var patt = /\d+;/g;

var H,L,code;

var arr = strObj.match(patt)||[];

for (var i=0;i

code = arr[i];

code=code.replace(‘‘,‘‘).replace(‘;‘,‘‘);

// 高位

H = Math.floor((code-0x10000) / 0x400)+0xD800;

// 低位

L = (code - 0x10000) % 0x400 + 0xDC00;

code = ""+code+";";

var s = String.fromCharCode(H,L);

strObj.replace(code,s);

}

return strObj;

}

这样评论里就能显示键盘自带表情符啦。。

感谢后端师兄给予的帮助，同时希望能给需要的人帮助。如有错误之处，请指正~~~

原文：http://www.cnblogs.com/yaliu/p/5190625.html