在做一個關(guān)于新聞的評論功能的H5頁面時，需求里面要求能夠發(fā)送表情顯示表情，如果使用自定義的表情庫，則在評論也還要加載大量的表情符圖片，極大的影響加載速度，消耗流量，去看了下別的新聞網(wǎng)頁版的評論部分也沒有使用外帶的表情庫。

在input輸入框里面添加上鍵盤自帶表情符后，發(fā)送給后臺服務(wù)器會顯示服務(wù)異常，上網(wǎng)找了下解決辦法，表情編碼是16進(jìn)制的，而我們用的是8進(jìn)制的于是報錯。將表情符轉(zhuǎn)碼成就能夠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;

// 轉(zhuǎn)換算法

return "" + code + ";";

} else {

return char;

}

});

return str;

}

這樣就解決了存儲問題。

要想成功展示表情符還得轉(zhuǎn)回來。不幸的是搜索到的解決方案里面只有上面一段轉(zhuǎn)碼的代碼，只能自己動手。于是就照著這個進(jìn)行了反轉(zhuǎn)

//表情解碼

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

總結(jié)

以上是生活随笔為你收集整理的html5输入框表情,H5页面input输入框含有键盘自带的表情符时显示异常的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。